Wechat applet, uniapp realize bottom loading, automatic request interface merge data onReachBottom() and scroll-view
Article Directory
onReachBottom
The explanation of onReachBottom on the uniapp official website is an event when the page scrolls to the bottom (not scroll-view scrolls to the bottom), which is often used to pull down the next page of data.
onReachBottom Usage
The first step is set under the style of page.json
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "name",
"navigationBarBackgroundColor": "#fff",
"onReachBottomDistance": 150, //距离底部多远时触发 单位是px
"enablePullDownRefresh":true //下拉刷新
}
},
]
The second step is to use the corresponding page
It should be written at the same level as data and method, which is similar to the life cycle
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
step one
Outside the subcomponent, add the scroll-view component and allow vertical scrolling. When using vertical scrolling, you need to give a fixed height and set the height through css.
<scroll-view @scrolltolower="getBottom" scroll-y="true" class=”elevend“>
//这里包含的是组件内容
</scroll-view>
<style>
.elevend{
height: 90vh;
}
</style>
step two
In the methods method, the business logic loaded at the bottom
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);
})
},
}