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

项目场景：

在小程序端实现触底加载数据，数据未全部加载完全时，每次触底加载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;
}

经验：

1、代码怎么写就会怎么执行，不必反复测试，直接把需求关键词提取出来，用搜索引擎找别人的解决方案

2、某种功能无法使用，可能是与其它属性有冲突，比如页面滚动加载不触发，考虑是否有设置属性  overflow-y: auto / overflow-y: scroll

3、使用scroll-view，一定要设置  scroll-y="true" 、class="elevend"（.elevend{height: 90vh;}）、lower-threshold="150px”

4、实现新功能思路：官网查找实现此功能的属性/函数，到搜索引擎查，看别人的解决方案