[TOC] ## movie-more.js ``` // pages/movie/movie-more/movie-more.js const app = getApp(); const douban = app.globalData.doubanUrl; import utils from "../../../utils/utils" var star = utils.star; var http = utils.http; Page({ data:{ isEmpty:true, start:0 }, onLoad: function (options) { var type = options.type; var title = options.title; // console.log(title) var count = "?start=0&count=20"; var url = douban + type + count; http(url, this.handleData) wx.setNavigationBarTitle({ title }); this.setData({ type }) wx.showLoading({ title: '加載中', }) }, handleData(res){ var title = res.data.title; var subjects = res.data.subjects; var movies = []; subjects.forEach(ele=>{ var average = ele.rating.average; var title = ele.title; var id = ele.id; if(title.length>6){ title = title.substr(0, 6) + '...'; } var stars = star(ele.rating.stars); var imgUrl = ele.images.small; var temp = { average, title, stars, imgUrl, id } movies.push(temp); }) if(this.data.isEmpty){ this.setData({ movies, title, isEmpty:false }) }else{ this.setData({ movies:this.data.movies.concat(movies) }) } wx.hideLoading() }, onReachBottom(){ this.data.start+=20 var start = this.data.start var type = this.data.type var url = `${douban}${type}?start=${start}&count=20` http(url,this.handleData) wx.showLoading({ title: '加載中', }) }, onClick(event){ var id = event.currentTarget.dataset.id; console.log(id) wx.navigateTo({ url: '/pages/web-page/web-page?id='+id, }) } }) ``` ## wxss和wxml ``` <import src="../movie-item/movie-item"></import> <view class='movie-more'> <block wx:for="{{movies}}" wx:key="index"> <template is="movieItem" data="{{...item}}" ></template> </block> </view> /* pages/movie/movie-more/movie-more.wxss */ @import '../movie-grid/movie-grid-template'; .movie-more{ display: flex; justify-content: space-between; flex-wrap: wrap; padding: 20rpx; font-size: 30rpx; } ```