uniapp小程序上滑加载与下拉刷新
·
上滑加载:
pages.json文件里添加配置
"globalStyle": {
"onReachBottomDistance":50
}
代码:
onPageScroll : function(e) { //nvue暂不支持滚动监听,可用bindingx代替
// console.log("滚动距离为:" + e.scrollTop);
},
onReachBottom() {
// console.log("触底")
if(this.list.length < this.total){
//触底时继续请求下一页展示的数据
this.queryParams.pageNum++;
this.getBlogList();
}
},
下拉刷新:
pages.json添加配置:
{
"path": "pages/index",
"style": {
"navigationBarTitleText": "xxx",
"navigationStyle": "custom",
"enablePullDownRefresh": true
}
}
代码:
onLoad: function() {
setTimeout(function () {
console.log('start pulldown');
}, 1000);
uni.startPullDownRefresh();
},
onPullDownRefresh() {
console.log('refresh');
this.queryParams.pageNum=1;
this.getList();
setTimeout(function () {
uni.stopPullDownRefresh();
}, 1000);
},
methods:{
getBlogList(){
list(this.queryParams).then(response => {
this.total=response.total;
var addList = response.rows;
if(this.list.length > 0){
if(this.queryParams.pageNum == 1){
//避免重复
var ids = [];
for(var i=0;i<this.list.length;i++){
ids.push(this.list[i].id);
}
for(var i=addList.length-1;i>=0;i--){
if(ids.indexOf(addList[i].id) == -1){
this.list.unshift(addList[i]);
}
}
}else{
addList.map(item => {
this.list.push(item)
})
}
}else{
this.list=addList;
}
})
},
}
更多推荐
所有评论(0)