(十四)微信小程序:上拉加载 下拉刷新 一:上拉加载 二:下拉刷新 本节完成对上拉加载和下拉刷新的功能,利用API提供+提供相应的条件操作即可实现,下节对电影页面进行优化~
1.movie-more.js中添加API给出的onReachBottom()函数,执行加载操作
// pages/movie/movie-more/movie-more.js var utils = require("../../../utils/utils.js"); Page({ data: { movies:[], publicURL:"", start:0 }, onLoad: function (options) { console.log(options.category); var publicURL = ""; switch(options.category){ case "正在热映": publicURL = "http://localhost:8888/v2/movie/in_theaters"; break; case "即将上映": publicURL = "http://localhost:8888/v2/movie/coming_soon"; break; case "排行榜": publicURL = "http://localhost:8888/v2/movie/top250"; break; } utils.http(publicURL,this.getMovieInfo,null,null); this.setData({ publicURL:publicURL }); }, 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:this.data.movies.concat(movies), start:this.data.start+=20 }); }, //页面上拉加载 onReachBottom:function(){ utils.http(this.data.publicURL+"?count=20&start="+this.data.start,this.getMovieInfo,null,null); } })
代码解析:1.设置每刷新一次数据,数据从start+=20开始
2.将之前查到的数据和加载后的数据进行合并(concat())
二:下拉刷新
1.开启下拉刷新限制
2.movie-more.js中添加API给出的onPullDownRefresh()函数,执行刷新操作
onPullDownRefresh:function(){ //清除之前数据 this.setData({ movies:[] }); utils.http(this.data.publicURL,this.getMovieInfo,null,null); }