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