Table of contents
1. Pull up and load the page
WeChat applet provides onReachBottom() pull-up event, link: https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onReachBottom
The onReachBottom() event can be called directly.
When making a call, compare the current page with the total number of pages to determine whether to refresh the data
data: {
list:'',//数据列表
page:1,//请求的第几页
size:10, //每页多少条哦
totalpage:1,//总页数
},
onShow() {
this.getList()
},
// 上拉事件
onReachBottom(){
if(this.data.page<=this.data.totalpage){
this.getList()
}
},
getList(){
let page=this.data.page
//接口参数
let params={
page: this.data.page,
size: this.data.size
}
//获取数据的接口请求成功后
page++
this.setData({
[`list[${this.data.page-1}]`]:items,//items:后台返回数据
page:page,
totalpage:res.data.totalpage
})
//... [`list[${this.data.page-1}]`]:items这种写法是为避免setData数据量过大,list数据在使用时需注意多循环一层
},<block class="" wx:for="{
{list}}" wx:for-item="pitem" wx:for-index="pindex" wx:key="{
{pindex}}">
<view class="" wx:for="{
{pitem}}" wx:key="{
{index}}">{
{item}}</view>
</block>
2.scroll-view pull up loading
Please read the document https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
Here you need to use lower-threshold, bindscrolltolower two attributes
lower-threshold: How far from the bottom/right, the scrolltolower event is triggered, the default value is 50
bindscrolltolower: Triggered when scrolling to the bottom/right
In fact, there is nothing to say, it is the same as pulling and loading on the page
Note : bindscrolltolower will always trigger to the bottom, you need to define a variable to control
.wxml
<scroll-view scroll-y="true" style="height: 100%;" lower-threshold="200" bindscrolltolower="scrollToLower">
</scroll-view>
.js
data: {
list:'',//数据列表
page:1,//请求的第几页
size:10, //每页多少条哦
totalpage:1,//总页数
loading:false,//控制变量
},
onShow() {
this.getList()
},
// scroll-view触底事件
scrollToLower(){
if(!this.data.loading && this.data.page<=this.data.totalpage){
this.setData({
loading:true
})
this.getList()
}
},
getList(){
let page=this.data.page
//接口参数
let params={
page: this.data.page,
size: this.data.size
}
//获取数据的接口请求成功后
page++
this.setData({
[`list[${this.data.page-1}]`]:items,//items:后台返回数据
page:page,
totalpage:res.data.totalpage,
loading:false
})
},