↓如图所示 三种不同状态。(用到了uniapp的uni-load-more)
第一步
首先在项目根目录page.json配置文件,当前的页面上配置上拉触底的距离
{
"path": "goods_list/goods_list",
"style": {
"onReachBottomDistance": 150
}
},
第二步
<uni-load-more :status="status" :content-text="contentText" />
第三步,data中配置↓
data() {
return {
list: [],
page: 1,
pageSize: 10,
total: 0,
isloading: false,
status:'loading',
contentText: {
contentdown: '上拉查看更多',
contentrefresh: '加载中',
contentnomore: '没有更多'
}
}
},
第四步,onS初始化数据
onShow() {
this.list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
this.page = 1
this.list = []
this.loadData()
},
第五步,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)
}
}