微信小程序触底加载数据实现

阿拉-M83

已于 2023-11-27 16:52:53 修改

阅读量385

点赞数

分类专栏： NIII-APS 文章标签：微信小程序小程序

于 2023-11-27 16:51:52 首次发布

本文链接：https://blog.csdn.net/Allen_7_kklt/article/details/134390747

版权

NIII-APS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章讲述了在微信小程序中使用HBuilderX实现触底加载数据的方法，遇到微信开发工具不兼容的问题，通过在scroll-view中监听scrolltolower事件和定义getBottom函数来处理。同时提供了兼容性和实现技巧的建议。

摘要由CSDN通过智能技术生成

项目场景：

在小程序端实现触底加载数据，数据未全部加载完全时，每次触底加载10条数据，与原有数据拼接

问题描述

在HBuilderX里面可以通过鼠标上下拖动实现加载数据，微信开发工具无法加载

@Override
	public void run() {
		bytes = mmInStream.read(buffer);
		mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget();
	}

原因分析：

HBuilderX与微信开发工具不是完全兼容，HBuilderX可以通过onReachBottom实现触底加载，微信开发工具不行

onReachBottom函数

		onReachBottom(){
			// this.status = 'loading';
			// this.queryParams.pageNum += 1
			// this.bottomFlag = true
			// console.log('触底加载......',this.queryParams.pageNum)
			// this.getList()
		},

解决方案：

使用<scroll-view>，监听@scrolltolower事件

<scroll-view @scrolltolower="getBottom"  scroll-y="true" class="elevend" lower-threshold="150px"  enhanced="true" >
</scroll-view>
// <scroll-view>只需要包住列表展示的内容即可，可以是
<template>
    <scroll-view>
        ……其它代码
    </scroll-view>
</template>

// 触底加载函数
getBottom(){
    if(!this.loading && this.noMoreData == false){
		this.status = 'loading';
		this.queryParams.pageNum += 1;
		console.log("已经到底，刷新下一页", this.queryParams.pageNum);
		this.bottomFlag = true;
		this.getList();
	}
},


// 数据不足10条时，说明所有数据加载完，展示提示信息，放在列表的<view>当中
<view v-if="noMoreData" style="text-align: center; padding: 10px;">
  没有更多数据了
</view>


if(this.bottomFlag){
	this.list= this.list.concat(response.data.list)
}else{
	this.list= response.data.list
}					
this.total = response.data.total
// 判断是否有更多数据
if (response.data.list.length < 10) {
	this.noMoreData = true;
} else {
	this.noMoreData = false;
}