【小程序】分页加载数据，下拉加载更多，上拉刷新

【 小程序】分页加载数据&＃xff0c;下拉加载更多&＃xff0c;上拉刷新

分页加载的优点就不多说了&＃xff0c;下面主要记录一下几个问题点。

1. scroll-view组件不能用在页面根布局中&＃xff0c;不然触发不了系统的onPullDownRefresh()、onReachBottom()回调。
2. 在Page页面配置中增加如下两项配置&＃xff1a;

enablePullDownRefresh: true,onReachBottomDistance: 100,


3. 如何判断是否加载完毕&＃xff1f;

计算公式&＃xff1a;&＃xff08;当前页数 - 1&＃xff09;* 每页加载个数 &＃43; 当前请求到的数据Data.length &＃61;&＃61; 数据总数 ; // 则加载完毕


4. 详细代码参考

&＃64;1. data中定义变量

const LIMIT &＃61; 6 // 每次加载的个数
data{currentPage: 1,noMoreData: false,isLoading: false,
}


&＃64;2. 数据请求接口封装

/*** 获取热推产品信息*/async getHotProductInfo(currentPage &＃61; 1, reset &＃61; false) {tips.loading()let params &＃61; {cityCode: 2500, // 默认上海page: currentPage,limit: LIMIT,}try {let result &＃61; await network.GET(&＃39;https://##.com/dany/poster/##&＃39;, params)tips.loaded()if (result && result.success && result.data && result.data.hotProduct && result.data.hotProductTotalCount) {// 判断是否加载完if ((currentPage - 1) * LIMIT &＃43; result.data.hotProduct.length &＃61;&＃61;&＃61; result.data.hotProductTotalCount) {this.noMoreData &＃61; true}let newHotProduct &＃61; JSON.parse(JSON.stringify(result.data.hotProduct))this.hotPushDatas.hotProduct &＃61; reset ? newHotProduct : this.hotPushDatas.hotProduct.concat(newHotProduct)this.$apply()}} catch (e) {tips.loaded()}}


&＃64;3. 增加下拉、上拉回调方法

async onPullDownRefresh() {await this.reload()wepy.stopPullDownRefresh()}onReachBottom() {if (this.noMoreData) {return}this.loadMore()}async loadMore() {if (this.noMoreData || this.isLoading) {return}this.isLoading &＃61; truethis.currentPage &＃43;&＃61; 1await this.getHotProductInfo(this.currentPage, false)this.isLoading &＃61; false}async reload() {this.noMoreData &＃61; falsethis.currentPage &＃61; 1return await this.getHotProductInfo(this.currentPage, true)}


&＃64;4. 在onLoad中执行,this.reload()初始化数据。

this.reload()


以上就是小程序下拉加载更多、上拉刷新当前数据的实现&＃xff0c;有问题欢迎留言讨论。