List style, nice-looking list Style

List style, nice-looking list Style

1. board. wxml

<view class="container">  <view class="body">    <scroll-view scroll-y="true" height="100%">      <block wx:for="{{boards}}">        <navigator url="../list/list?type={{item.key}}&title={{item.name}}">          <view class="board">            <view class="board-info">              <text class="board-name">{{item.name}}</text>              <image class="board-img" src="/images/arrowright.png" mode="aspectFill"/>            </view>          </view>        </navigator>      </block>    </scroll-view>  </view></view>

2. board. js

// Douban API const douban = require ('.. /.. /libraries/douban. js ') Page ({data: {boards: [{key: 'In _ theaters', name:' in Review '}, {key: 'coming _ soon', name: 'coming soon '}, {key: 'top250', name: 't0p250'}, // {key: 'Weekly', name: 'koubei list'}, {key: 'US _ box', name: 'North American room ranks'}, // {key: 'New _ movies ', name: 'New tablet rank'}], movies: [], loading: true}, onLoad () {douban. find ('in _ theaters', 1, 5 ). then (d => this. setData ({movies: d. subjects, loading: false })). catch (e => {console. error (e) this. setData ({movies: [], loading: false })})},})

3. board. wxss

.container {  display: flex;  flex: 1;  flex-direction: column;  min-height: 100%;  font-size: 32rpx;}.body {  padding-left: 30rpx;  padding-right: 30rpx;  flex: 1;  overflow: auto;}.board {  margin-top: 20rpx;  margin-bottom: 20rpx;  background-color: #FBF9FE;  overflow: hidden;  border-radius: 4rpx;  cursor: pointer;}.board-info {  display: flex;  padding: 40rpx;  align-items: center;  flex-direction: row;}.board-name {  flex: 1;}.board-img {  width: 32rpx;  height: 32rpx;}