微信小程序实战–集阅读与电影于一体的小程序项目（六）

24.更多电影

app.json

"pages": [    "pages/posts/post",    "pages/welcome/welcome",    "pages/posts/post-detail/post-detail",    "pages/movies/movies",    "pages/movies/more-movie/more-movie"  ],

more-list-template.wxml

 <view class="more" catchtap='onMoreTap' data-category="{{categoryTitle}}">          <text class="more-text">更多</text>          <image class="more-img" src="/images/icon/arrow-right.png"></image>        </view>

movies.js

 onMoreTap:function(event){    var category = event.currentTarget.dataset.category;    wx.navigateTo({      url: 'more-movie/more-movie?category=' + category    })  },

more-movie.js

// pages/movies/more-movie/more-movie.jsPage({  onLoad: function (options) {    var category = options.category;    console.log(category);  },})

分别点击更多，可以看到对应的分类

25.动态设置导航栏标题

more-movie.js

// pages/movies/more-movie/more-movie.jsPage({  data:{    categoryTitle: '',  },  onLoad: function (options) {    var category = options.category;    this.data.categoryTitle = category;    console.log(category);  },  onReady: function () {    wx.setNavigationBarTitle({      title: this.data.categoryTitle,    })  },})

26.更多电影页面数据加载

util.js

function http(url, callback) {  wx.request({    url: url,    method: 'GET',    header: {      'content-type': 'json'     },    success: function (res) {      callback(res.data)    }  })}module.exports = {  convertToStarArray: convertToStarArray,  http: http,};

more-movie.js

var util = require('../../../utils/util.js')var app = getApp();Page({  data:{    categoryTitle: '',    movies: {},  },  onLoad: function (options) {    var category = options.category;    this.data.categoryTitle = category;    var dataUrl = ''    switch (category) {      case "正在热映":        dataUrl = app.globalData.g_baseUrl + "/v2/movie/in_theaters";        break;      case "即将上映":        dataUrl = app.globalData.g_baseUrl + "/v2/movie/coming_soon";        break;      case "豆瓣Top250":        dataUrl = app.globalData.g_baseUrl + "/v2/movie/top250";        break;    }    util.http(dataUrl, this.processDoubanData)  },  processDoubanData:function(data){    var movies = [];    for (var idx in data.subjects) {      var subject = data.subjects[idx]      var title = subject.title;      if (title.length >= 6) {        title = title.substring(0, 6) + "...";      }      var temp = {        stars: util.convertToStarArray(subject.rating.stars),        title: title,        average: subject.rating.average,        coverageUrl: subject.images.large,        movieId: subject.id      }      movies.push(temp)    }    this.setData({      movies: movies    });  },  onReady: function () {    wx.setNavigationBarTitle({      title: this.data.categoryTitle,    })  },})

movie-grid-template.wxml

<import src="../movie/movie-template.wxml" /><template name="movieGridTemplate">  <view class="grid-container">    <block wx:for="{{movies}}" wx:for-item="movie">      <view class="single-view-container">        <template is="movieTemplate" data="{{...movie}}" />      </view>    </block>  </view></template>

movie-grid-template.wxss

@import "../movie/movie-template.wxss";/*scroll-view*/.single-view-container{    float:left;    margin-bottom: 40rpx;}.grid-container{    height: 1300rpx;    margin:40rpx 0 40rpx 6rpx;}

more-movie.wxml

<import src="../movie-grid/movie-grid-template.wxml" /><template is="movieGridTemplate" data="{{movies}}" />

more-movie.wxss

@import "../movie-grid/movie-grid-template.wxss";

预览