小程序学习——上拉加载and下拉刷新(适用于130400以上版本
2019-03-25 本文已影响0人
默色留恋
在130400版本中scroll-view组件与 onPullDownRefresh不可以同时使用,上拉加载和下拉刷新功能是在.js的 onReachBottom: function () {}和 onPullDownRefresh: function () {}里实现的<scroll-view>标签改为view,而且不需要设置高度
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
console.log("上拉加载")
var nexturl = this.data.url + "?start=" + this.data.totalnum + "&count=20";
util.http(nexturl, this.processdoubanData);
// loading状态
wx.showNavigationBarLoading()
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
console.log("下拉刷新")
var refreshUrl = this.data.url + "?start=0&count=20";
this.data.movies={};
this.data.isEmpty=true;
util.http(refreshUrl, this.processdoubanData);
// loading状态
wx.showNavigationBarLoading();
},
processdoubanData: function(data) {
var movies = [];
var totalmovies = {};
//如果要绑定新加载的数据,那么需要同旧有的数据合并在一起
if(!this.data.isEmpty){
totalmovies=this.data.movies.concat(movies)
}else{
totalmovies = movies;
this.data.isEmpty = false
}
this.setData({
movies: totalmovies
});
this.data.totalnum += 20;
//loading状态影藏
wx.hideNavigationBarLoading();
//结束下拉刷新
wx.stopPullDownRefresh();
},