（十三）微信小程序：更多电影页面 实现点击更多进入更多电影界面 解决完上述问题后，呈现出来的效果果然变好了，附上一张图庆贺庆贺！ 给自己点掌声！ 下一节实现“下拉加载”+“上拉刷新”功能，我们不见不散~
1.创建movie-more目录，实现movie界面向movie-more的跳转
首先跳转功能在前面学习过，但此次添加了在url中传递参数category以判断打开的是查询哪一类型电影数据。
在movie.js中添加函数moreHandler实现跳转
moreHandler:function(event){ var category = event.currentTarget.dataset.category; wx.navigateTo({ url: './movie-more/movie-more?category='+category, }) }
2.movie-more目录
（1）movie-more.js
// pages/movie/movie-more/movie-more.js var utils = require("../../../utils/utils.js"); Page({ data: { movies:[] }, onLoad: function (options) { console.log(options.category); var publicURL = ""; switch(options.category){ case "正在热映": publicURL = "http://localhost:8888/v2/movie/in_theaters?count=20"; break; case "即将上映": publicURL = "http://localhost:8888/v2/movie/coming_soon?count=20"; break; case "排行榜": publicURL = "http://localhost:8888/v2/movie/top250?count=20"; break; } utils.http(publicURL,this.getMovieInfo,null,null); }, getMovieInfo:function(data){ var movies = []; for(var i = 0;i<data.subjects.length;i++){ var temp = { large:data.subjects[i].images.large, title:utils.cutTitle(data.subjects[i].title), star:utils.star(data.subjects[i].rating.stars), average:data.subjects[i].rating.average, id:data.subjects[i].id } movies.push(temp); } this.setData({ movies:movies }); } })
代码解析：1.使用switch：加载页面时，需要依据传入的url中的参数category判断查询哪一类型电影数据
2.调用utils中的url函数获取 多部电影数据 存入movies数组中
3.然后放置在data数据*前端页面调用
（2）movie-more.wxml
<!--pages/movie/movie-more/movie-more.wxml--> <import src="../movie-template/movie-template.wxml"/> <view class="grid-container"> <block wx:for="{{ movies }}" wx:for-index="index" wx:key="{{ index }}"> <view class="single-view-container"> <template is="movieTemplate" data="{{ ...item }}"/> </view> </block> </view>
代码解析：将每取得的一条电影信息+调用可复用的movie-template，实现电影信息的显示
（3）movie-more.wxss
/* pages/movie/movie-more/movie-more.wxss */ @import "../movie-template/movie-template.wxss"; .single-view-container{ float:left; margin-bottom: 40rpx; } .grid-container{ /*height: 1300rpx;*/ margin:40rpx 0 40rpx 6rpx; }
3.发现呈现出来的效果不好
问题：1.星星图片显示不出来
2.出现排版混乱（一行有的是3个，有的是2个）
解决：1.因为星星是调取的本地图片（在调用模板时，相对路径会出错），所以得使用绝对路径进行调用
2.因为有的电影名称过长，所以可以在utils中定义限制字长的函数cutTitle(title)，然后应用于需要调取title处即可
//处理电影那个名称 function cutTitle(title){ var currentTitle = ""; if(title.length>8){ currentTitle = title.substring(0,6)+"..."; }else{ return title; } return currentTitle; } module.exports = { http:http, star:star, cutTitle:cutTitle }
解决完上述问题后，呈现出来的效果果然变好了，附上一张图庆贺庆贺！
给自己点掌声！