uniapp触底加载

---

一、onReachBottom()函数

首先，在page.json的style下设置

"pages": [ 
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app",
				"enablePullDownRefresh": true //设置参数为true
				"onReachBottomDistance":20, //距离底部多远时触发 单位为px
			}
		}
	]

然后在页面使用即可，与生命周期函数同一级别

onReachBottom(){
		console.log('已触底');
    }
},

二、在子组件中使用滚动区域scrow-view触底加载

在自定义组件中onReachBottom触底加载事件不起作用，但是我们在业务需求中需要实现此功能，这里可以借用scroll-view 组件。

1.添加scroll-view组件

在子组件外部加上scroll-view 组件，并允许纵向滚动（scroll-y=“true”）。

<scroll-view @scrolltolower="lowerBottom" scroll-y="true" class="scrollHeight">
//组件内容
</scroll-view>

2.设置height

使用竖向滚动时，需要给一个固定高度，通过 class 设置 height。

.scrollHeight {
  max-height: 100vh;
}

3.在methods方法中写入触底加载的业务逻辑

lowerBottom() {
	console.log("触底加载");
},