项目场景:
例如:后台返回的列表数据太多采用分页形式用下拉来刷新数据
问题描述
单页面不采用组件形式用onReachBottom可以进行下拉更新数据
如果把这个当作成组件引用,onReachBottom不起效果
解决方案:
1.单页面
//数据方面
query:{
pageNum:1,//页码
pageSize:9//每页有多少条
}
//后台返回总数据
total:0,
//存放的数组
List:[],
//下滑的提示信息
loadingTxt:'',
onReachBottom() {
if (this.List.length >= this.total) {
this.loadingTxt = '没有更多数据了'
} else {
this.query.pageNum++;
this.loadingTxt = '加载中..';
this.请求接口的方法()
//例如 this.getInfo()
}
},
methods:{
getInfo(){
//请求接口后
this.total = res.total
this.List = [...this.List,...接口的数据]
}
}
2.组件形式
比如:新闻列表是个组件,在首页使用需要引用他,但是直接使用onReachBottom不起效果
//在父组件首页
onReachBottom(){
uni.$emit('onReachBottom')
},
//在子页面新闻页面
mounted() {
let that=this;
uni.$on('onReachBottom',function(data){
if (that.List.length >= that.total) {
that.loadingTxt = '没有更多数据了'
} else {
that.query.pageNum++;
that.loadingTxt = '加载中..';
that.接口方法()
}
});
},