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

onReachBottom

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

onReachBottom用法

第一步 在page.json的style下設(shè)置

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

第二步 在對應(yīng)的頁面使用

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

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

scroll-view

步驟一

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

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


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

步驟二

在methods方法中，觸底加載的業(yè)務(wù)邏輯

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