美文网首页
uni-app 页面触底刷新

uni-app 页面触底刷新

作者: THERAIN_ | 来源:发表于2020-07-20 10:17 被阅读0次

uni-app在页面的生命周期中提供onReachBottom 页面滚动到底部的事件(不是scroll-view滚到底),常用于上拉加载下一页数据。如使用scroll-view导致页面级没有滚动,则触底事件不会被触发

在页面中 使用时 onReachBottom 可在pages.json里定义具体页面底部的触发距离onReachBottomDistance,比如设为50,那么滚动页面到距离底部50px时,就会触发onReachBottom事件。

"enablePullDownRefresh": true
image.png

在页面中 直接使用,与生命周期函数 同级别

onLoad(){

},
onReachBottom(){
    // 触底的时候请求数据,即为上拉加载更多
    var allTotal = this.page * this.pageSize
    if(allTotal < this.totalElements){
        this.allListItem = false;    
        this.page ++;    
                
        // this.GetMoreCdcAccountList(this.usertoken); //请求更多数据列表
    }else{
        this.allListItem = true;
        console.log('已加载全部数据')
    }
},
methods:{
    GetMoreCdcAccountList(){
        console.log('请求更多数据')
    }
}
image.png

相关文章

网友评论

      本文标题:uni-app 页面触底刷新

      本文链接:https://www.haomeiwen.com/subject/tqrekktx.html