↓Three different states as shown in the picture. (Using uniapp’s uni-load-more)
first step
First, configure the page.json configuration file in the project root directory and configure the pull-up bottoming distance on the current page.
{
"path": "goods_list/goods_list",
"style": {
"onReachBottomDistance": 150
}
},
Step 2
<uni-load-more :status="status" :content-text="contentText" />
The third step, configure in data↓
data() {
return {
list: [],
page: 1,
pageSize: 10,
total: 0,
isloading: false,
status:'loading',
contentText: {
contentdown: '上拉查看更多',
contentrefresh: '加载中',
contentnomore: '没有更多'
}
}
},
The fourth step, onS initializes data
onShow() {
this.list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
this.page = 1
this.list = []
this.loadData()
},
Step 5, methods
methods: {
onReachBottom() {
if (this.status == 'noMore') return
if (this.isloading) return //如果isloading 是正在请求接口中那么 直接return
// 让页码值自增+1
this.page++
this.loadData()
},
loadData() {
this.isloading = true
this.status = 'loading' //显示加载中
setTimeout(() => {
this.total = 6 //重新给total赋值
this.list.push(1)
if (this.page * this.pageSize >= this.total) {
this.status = 'noMore'
} else {
this.status = 'more'
}
this.isloading = false
}, 1000)
}
}