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

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

预览

总结

以上是生活随笔为你收集整理的微信小程序实战–集阅读与电影于一体的小程序项目（六）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。