下拉刷新和上拉触底

主要用于下拉刷新数据，上拉触底查询下一页数据。一般针对需要使用的页面进行配置，而不会全局配置。

属性	类型	默认值	描述	平台差异说明
enablePullDownRefresh	Boolean	false	是否开启下拉刷新
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位只支持px
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark / light	微信小程序

pages.json中配置举例

{
	"pages": [
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页",
				"enablePullDownRefresh": true, // 开启下拉刷新
				"onReachBottomDistance": 50 // 页面上拉触底事件触发时距页面底部距离
			}
		}
    ]
}

那么页面是如何触发上拉触底与下拉刷新事件的呢？实现生命周期中的 onPullDownRefresh与onReachBottom 周期函数

<script>
	export default {
		data() {
			return {
				page: 1
			}
		},
		async onPullDownRefresh() {
            // 这里写下拉刷新逻辑，我这里是调用了methods中的方法
			await this.getCheck()
		},
        onReachBottom() {
            // 这里写下拉触底后的逻辑
			this.page++
			this.findSearch()
		},
	}
</script>