uniapp上拉加载的避坑指南

#uniapp上拉加载的避坑指南| 来源: 网络整理| 查看: 265

uniapp上拉加载

uniapp的上拉加载和下拉刷新一样都有两个方法, 一个是整体的上拉(生命周期函数onReachBottom), 一个是局部的上拉(基于scrpll-view组件);

一.整个页面的上拉(onReachBottom)

注意: 使用scroll-view导致页面级没有滚动，则触底事件不会被触发

onReachBottom() { //当数组里的数据大于等于total的时候,说明数据已经加载完了 if (this.dataList.length >= this.total) { setTimeout(() => { this.status = 'noMore' }, 1000) } else { //每次上拉加载的数据比上一次多十个 this.current++ this.status = 'loading' let that = this setTimeout(() => { that.getData() }, 1000) } }, methods:{ getData(){ let data={ current: this.current, size: this.size } uni.request({ url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。 data:data, header: { 'custom-header': 'hello' //自定义请求头信息 }, success: (res) => { if (res.success) { //下拉刷新的时候将数组置空 if (this.pull) { this.dataList = [] } this.total = res.total for (let i = 0; i

【本文地址】

公司简介

联系我们