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.js
Page({onLoad: function (options) {var category = options.category;console.log(category);},
})

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

25.动态设置导航栏标题

more-movie.js

// pages/movies/more-movie/more-movie.js
Page({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";

预览