列表樣式

 1.board.wxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// Douban API 操做
const douban = require('../../libraries/douban.js')
 
Page({
  data: {
    boards: [
      { key: 'in_theaters', name: '正在熱映' },
      { key: 'coming_soon', name: '即將上映' },
      { key: 'top250', name: 'T0P250' },
      // { key: 'weekly', name: '口碑榜' },
      { key: 'us_box', name: '北美票房榜' },
      // { key: 'new_movies', name: '新片榜' }
    ],
    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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.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;
}

<div class="textRight">
<a target="_blank" href="http://www.bdqcp.net/">保定長途汽車站</a>
</div>