微信小程序，uniapp触底加载、自动请求接口合并数据

微信小程序，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);
	         })
		},
}