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";预览
