微信小程序 項目實戰（三）list 列表頁 及 item 詳情頁

1.項目結構

2.list 列表頁

（1）數據(邏輯)

list.js

// pages/list/list.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    title: '加載中...', // 狀態
    list: [], // 數據列表
    type: '', // 數據類型
    loading: true // 顯示等待框
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) { // options 為 board頁傳來的參數
    const _this = this;
    // 拼接請求url
    const url = 'https://api.douban.com/v2/movie/' + options.type;
    // 請求數據
    wx.request({
      url: url,
      data: {},
      header: {
        'content-type': 'json' // 默認值
      },
      success: function(res) {
        console.log(res.data);
        // 賦值
        _this.setData({
          title: res.data.title,
          list: res.data.subjects,
          type: options.type,
          loading: false // 關閉等待框
        })
      }
    })
  }
})

（2）頁面布局

list.wxml

<!--pages/list/list.wxml-->
<!--列表頁-->
<view class='container'>
  <!--等待框-->
  <loading hidden="{{!loading}}">加載中...</loading>
  <!--頂部標題欄-->
  <view class='page-header'>
    <text class='page-title'>{{title}}</text>
  </view>
  <!--列表-->
  <view class='page-body' wx:for="{{list}}" wx:key="id">
    <!--類型判斷,顯示不同的數據-->
    <block wx:if="{{type === 'us_box'}}">
      <navigator url='../item/item?id={{item.subject.id}}'>
        <view class='item'>
          <image class='poster' src='{{item.subject.images.small}}'></image>
          <view class='meta'>
            <text class='title'>{{item.subject.title}}</text>
            <text class='sub-title'>{{item.subject.original_title}}({{item.subject.year}})</text>
            <view class='artists'>
              <text>導演：</text>
              <text wx:for="{{item.subject.directors}}" wx:key="id">{{item.name}}</text>
            </view>
            <view class='rating'>
              <text>{{item.subject.rating.average}}</text>
            </view>
          </view>
        </view>
      </navigator>
    </block>
    <!--另一種情況-->
    <block wx:else>
      <navigator url='../item/item?id={{ item.id }}'>
        <view class='item'>
          <image class='poster' src='{{item.images.small}}'></image>
          <view class='meta'>
            <text class='title'>{{item.title}}</text>
            <text class='sub-title'>{{item.original_title}}({{item.year}})</text>
            <view class='artists'>
             <text>導演：</text>
             <text wx:for="{{item.directors}}" wx:key="id">{{item.name}}</text>
            </view>
            <view class='rating'>
              <text>{{item.rating.average}}</text>
            </view>
          </view>
        </view>
      </navigator>
    </block>
  </view>
</view>

（3）樣式

list.wxss

/* pages/list/list.wxss */
.page-header {
  display: flex;
  justify-content: center;
  border-bottom: 1rpx solid #ccc;
}
.page-title {
  padding: 20rpx 40rpx;
  color: #999;
  font-size: 38rpx;
  text-align: center;
}
.page-body {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.item {
  display: flex;
  padding: 20rpx 40rpx;
  border-bottom: 1rpx solid #eee;
  cursor: pointer;
}
.item .poster {
  width: 128rpx;
  height: 128rpx;
  margin-right: 20rpx;
}
.item .meta {
  flex: 1;
}
.item .meta .title,.item .meta .sub-title {
  display: block;
  margin-bottom: 15rpx;
}
.item .meta .title {
  font-size: 32rpx;
}
.item .meta .sub-title {
  font-size: 22rpx;
  color: #c0c0c0;
}
.item .meta .artists {
  font-size: 26rpx;
  color: #999;
}
.item .rating {
  font-size: 28rpx;
  font-weight: bold;
  color: #f74c31;
}
.tips {
  font-size: 28rpx;
  text-align: center;
  padding: 50rpx;
  color: #ccc;
}
.tips image {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}
.tips image,.tips text {
  vertical-align: middle;
}

（4）效果圖

3.item 詳情頁

（1）數據(邏輯)

item.js

// pages/item/item.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    title: '',
    loading: true,
    movie: {}
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    const _this = this;
    // 拼接請求url
    const url = 'https://api.douban.com/v2/movie/subject/' + options.id;
    // 請求數據
    wx.request({
      url: url,
      data: {},
      header: {
        'content-type': 'json' // 默認值
      },
      success:function(res) {
        // 賦值
        _this.setData({
          movie: res.data,
          loading: false // 隱藏等待框
        })
      }
    })
  },

  /**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function () {
    // 修改導航欄標題
    wx.setNavigationBarTitle({
      title: this.data.title + '<<電影<<豆瓣'
    })
  }
})

（2）頁面布局

item.wxml

<!--pages/item/item.wxml-->
<!--詳情頁-->
<!--等待框-->
<loading hidden="{{!loading}}">加載中...</loading>
<!--滾動列表-->
<scroll-view scroll-y="true" wx:if="{{movie.title}}">
  <view class='meta'>
    <image class='poster' src='{{movie.images.large}}' background-size="cover"></image>
    <text class='title'>{{movie.title}}({{movie.year}})</text>
    <text class='info'>評分：{{movie.rating.average}}</text>
    <text class='info'>導演：<block wx:for="{{movie.directors}}" wx:key="id">{{item.name}}</block></text>
    <text class='info'>主演：<block wx:for="{{movie.casts}}" wx:key="id">{{item.name}}</block></text>
  </view>
  <view class='summary'>
    <text class='label'>摘要：</text>
    <text class='content'>{{movie.summary}}</text>
  </view>
</scroll-view>

（3）樣式

item.wxss

/* pages/item/item.wxss */
.meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 1000rpx;
  padding: 50rpx 40rpx;
}
.poster {
  width: 80%;
  height: 80%;
  margin: 20rpx;
}
.title {
  font-size: 42rpx;
  color: #444;
}
.info {
  font-size: 18rpx;
  color: #888;
  margin-top: 20rpx;
  width: 80%;
}
.summary {
  width: 80%;
  margin: 30rpx auto;
}
.label {
  display: block;
}
.content {
  color: #666;
  font-size: 20rpx;
  padding: 10rpx;
}

（4）效果圖