## movies-more.js ### 初始数据设置 ``` // pages/movies/movies-more/movies-more.js var douban = getApp().globalData.doubanUrl; //从app.js中获取全局地址 import utils from "../../../utils/utils"; //引入utils中的自定义函数 var http = utils.http; var star = utils.star; var sliceTitle = utils.slicetitle; //声明从utils中获取的自定义函数 Page({ //声明data数据内容，后面setData也可将内容写入，构成该页面的this.Data data: { start: 0, count: 21, isEmpty: true }, ``` ### 页面加载时相关设置 ``` onLoad: function (options) { // 小程序页面加载的时候，可以通过options获取到上一个页面标签的属性以及属性值； // 进入这个页面时候触发而options就是页面跳转时候所传的参数。以该页面为例，它的options就是movie页面 中more函数获取的type和title wx.showLoading({ title:"加载中..." }) //页面数据加载完成前的loading圆圈 var type = options.type; var title = options.title; var count = this.data.count; //初始数据data中设置count=21 var dataUrl = douban + type; //dataUrl是默认电影数据地址，因为没有加限制默认取20条数据 var url = `${dataUrl}?start=0&count=${count}`; //url在默认数据地址后加限制，从0开始取21条数据（小程序屏幕在现在样式设置下一排显示3个电影。使用flex布局， justify-content: space-between;使得只有两条数据时，数据分别显示在屏幕左右两侧，中间空缺） http(url, this.handleData); //使用在utils中自定义http函数发送数据请求 wx.setNavigationBarTitle({ title }); //设置该页面上方导航的title，这里使用的数据也是movie页面中more传递过来的title数据，即在options中的数据 this.setData({ dataUrl }) //将dataUrl数据更新到data中，便于下一个函数从data中获取使用 // console.log(this.data) }, ``` ### 自定义handleData函数处理数据 ``` handleData(res) { var title = res.data.title; var subjects = res.data.subjects; var movies = []; subjects.forEach(ele => { var average = ele.rating.average; var stars = star(ele.rating.stars); var title = sliceTitle(ele.title); var imgUrl = ele.images.small; var id = ele.id; var temp = { average, stars, title, 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.hideNavigationBarLoading(); wx.hideLoading(); //隐藏数据加载loading圆圈 }, ``` ### 下拉刷新页面 ``` onReachBottom() { var dataUrl = this.data.dataUrl; var count = this.data.count; //从data中获取豆瓣不加条数限制的地址以及每次增量count this.data.start += count; //使每刷新一次的start值都可以加上增量 //直接使用this.data.set就可以不用this.setData var start = this.data.start; //再将this.data.start赋给变量start（代码顺序执行），先在上面将start值进行加减 console.log(start) var url = `${dataUrl}?start=${start}&count=${count}`; //声明地址url console.log(url) http(url,this.handleData); //发送http请求数据 // wx.showNavigationBarLoading(); wx.showLoading({ title:"加载中..." }) //显示数据加载loading圈 } ``` ### 跳转致详情页面 ``` movieDetail(event) { var id = event.currentTarget.dataset.id; wx.navigateTo({ url:'/pages/movies/movies-detail/movies-detail?id='+id }) // console.log(id); } }) ```