微信小程序，uniapp 實現觸底加載、自動請求接口合并數據 onReachBottom()和scroll-view

onReachBottom

uniapp官網onReachBottom的解釋是頁面滾動到底部的事件（不是scroll-view滾到底），常用于下拉下一頁數據。

onReachBottom用法

第一步 在page.json的style下設置

	"pages": [ 
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "name",
				"navigationBarBackgroundColor": "#fff", 
				"onReachBottomDistance": 150,  //距離底部多遠時觸發 單位是px
				"enablePullDownRefresh":true   //下拉刷新
			}
		},
	]

第二步 在對應的頁面使用

要寫在和data，method平級,和生命周期差不多

data() {},
methods:{},
onReachBottom(){
	//里面加接口分頁，拿到數據后將數據push進原來的數據里即可完成觸底加載，自動請求接口合并數據
	
	// 讓頁碼值自增 +1
	console.log("已經到底咯，刷新下一頁");
	this.params.pageNum += 1
	// 重新獲取列表數據
	apiGetAllPosts(this.params).then(res => {
		this.allGoods.push(...res.data)
	}).catch(err => {
		console.log(err);
	})
}

scroll-view

步驟一

在子組件外部，加上scroll-view 組件，并允許縱向滾動 使用豎向滾動時，需要給一個固定高度，通過 css設置高度。

<scroll-view @scrolltolower="getBottom"  scroll-y="true" class=”elevend“>
//這里包含的是組件內容
</scroll-view>


<style>
	.elevend{
		height: 90vh;
	}
</style>

步驟二

在methods方法中，觸底加載的業務邏輯

methods: {
		//觸底加載
		getBottom(){
	         //里面加接口分頁，拿到數據后將數據push進原來的數據里即可完成觸底加載，自動請求接口合并數據
	         
	         // 讓頁碼值自增 +1
	         console.log("已經到底咯，刷新下一頁");
	         this.params.pageNum += 1
	         // 重新獲取列表數據
	         apiGetAllPosts(this.params).then(res => {
	         	this.allGoods.push(...res.data)
	         }).catch(err => {
	         	console.log(err);
	         })
		},
}