8、uniapp上拉加载

上拉加载

onReachBottom

页面生命周期的onReachBottom钩子可以监听上拉滚动条到底时的事件。

onReachBottom页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。
注意 可在pages.json里定义具体页面底部的触发距离onReachBottomDistance，比如设为50，那么滚动页面到距离底部50px时，就会触发onReachBottom事件。

官网 -> 全局文件 -> pages.json页面路由 -> globalStyle即可找到该路由。
onReachBottomDistance
页面上拉触底事件触发时距页面底部距离，单位只支持px。

默认是50，基本到底才触发，如图：

全局文件page.json的globalStyle属性里可以加一个onReachBottomDistance属性值。用来配置到底部多少距离触发拉滚动条到底时的事件。当然，我们不设置全局，只设置单个页面即可。所以放在pages的具体地址。如：

这样就里底部200px就触发了事件了。

<template>
	<view>
		<view style="height: 300px;height: 300px;" v-for="(item,index) in list":key='index'>
			{{item}}
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				list:['张三','李四','王五','赵六']
			}
		},
		onReachBottom(){
			console.log('到底了');
			this.list=[...this.list,'张三','李四','王五','赵六'];
		}
	}
</script>