uni-app 实现下拉 懒加载的两种方式

实现下拉加载的两种方式:

• scrolltolower： 只占了页面的一部分，其事件处理在 method中；
• onReachBottom：整个页面，其事件处理与method平级；

用scrolltolower实现

1. 使用scroll-view 标签充当分页容器；
2. 绑定滚动条触底事件 scrolltolower；
3. 实现下拉加载逻辑；

1，新建 scroll-view 标签，指定方向，触底函数；

<!-- 如果用小程序原生，bindscrolltolower=""handle -->
<scroll-view scroll-y @scrolltolower="handle" class="scrollHeight">
	<view v-for="(item, index) in 40" :key="index">{{ item }}</view>
</scroll-view>

2，指定scroll-view 标签高度；

只有指定高度了，scrolltolower() 触底函数才能被触发；
指定高度的时候如果上面有其他标签，就得减去其他标签的高度，在CSS里计算一下；

.scrollHeight{
	/* 
	height: 屏幕的高度 - 头部标题
	100vh: 就等于屏幕的高度，因为手机型号不一行高度可能不一样，
		所以使用 100vh； 
	*/
	height: calc(100vh - 36px);
}

3，实现逻辑处理

当触底事件被触发后要做的逻辑：

1. 修改请求的参数 params: skip += limit
2. 重新发送请求 getDataList()
3. 请求成功后 对datas 的数据进行叠加

data(){
	return {
		datas: [],
		params: {
			// 给多少条数据
			limit: 10,
			// 要跳过多少条数据往后面添加
			skip: 30
		},
		hasMore:true
	}
}
getDataList(){
	this.request({
		url:"https://www.runoob.com/try/ajax/json_demo.json",
        // 这个参数不固定, 每次下拉的时候都去请求新的参数
        data: this.params
	}).then(res=> {
		if(res.data.length == 0){ // 判断下拉刷新还有没有下一页数据
			this.hasMore = false
			return
		}
		if(this.datas.length == 0){ // 第一次发送的请求
			// 这里写第一次就加载好，不需要下拉刷新的数据
			...
		}
		// 对数据进行叠加
		this.datas = [...this.datas, ...res.data]
    }).catch(err=>{
        console.log(err)
    })
}
handle(){
	// 1. 修改请求的参数 params: skip += limit
	// 2. 重新发送请求 getDataList()
	// 3. 请求成功后 对datas 的数据进行叠加
	if (this.hasMore){
		this.params.skip += this.params.limit
		getDataList()
	} else {
		uni.showToast({
			title: "没有数据了",
			icon: "none"   // 次处必须有，如果没有就默认返回成功的icon
		})
	}
	
}
mounted(){
	getDataList()
}

用onReachBottom实现

用onReachBottom更为简单，不用设置宽高，如果页面触底了会自动触发onReachBottom函数

onReachBottom(){
	// 如果整个页面触底了就会自动触发这个函数
	...
}
method: {
}