uni-app上拉加載

• 通過在pages.json文件中找到當前頁面的pages節點下style中配置onReachBottomDistance可以設置距離底部開啟加載的距離，默認為50px

• 通過onReachBottom監聽到觸底的行為

參考：

https://uniapp.dcloud.io/collocation/frame/lifecycle?id=頁面生命周期

https://uniapp.dcloud.io/collocation/pages

使用示例

添加頁面配置並配置上拉加載的觸底距離

{
    "path":"pages/list/list",
    "style": {
    	//單位為px
    	"onReachBottomDistance": 100
    }
},

寫入頁面代碼

<template>
	<view>
		<view>這是列表頁</view>
		<view class="box-item" v-for="item in list">
			{{item}}
		</view>
		<button @click="pullDown">下拉刷新</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ['前端', 'php', 'UI', '測試', '大數據', '前端', 'php', 'UI', '測試', '大數據']
			}
		},

		onReachBottom() {
			console.log('頁面觸底了')
			this.list = [...this.list, ...['增加設計師', '增加UI', '增加前端', '增加增加測試', '增加大數據']]
		},
	}
</script>

<style>
	.box-item {
		height: 100px;
		line-height: 100px;
	}
</style>

效果

每次都會上拉觸底都會加載幾條數據