uniapp scroll-view滑到底部加载更多数据
进入页面加载完请求第一页数据(onLoad)或者切入前台请求(onShow),根据需求修改,我这里是onLoad。必须设置下面两个属性。
·
必须设置下面两个属性
1. scroll-y="true"
2. height:90vh;
//lowerBottom触底事件
<scroll-view @scrolltolower="lowerBottom" style="height:90vh;" scroll-y="true">
//list:展示的数据
<view class="list" v-for="(item,index) in list" :key="index" >
{{item.content}}
</view>
//bottomText底部文字
<view class="medicine_title">
{isBottom?'没有更多数据了~':'下拉加载更多'}}
</view>
</scroll-view>
data数据
list:[], //展示的数据
//分页参数,跟后台协商参数
listQuery:{
page:1,
size:10,
},
//判断是否请求完毕数据
isBottom: false,
进入页面加载完请求第一页数据(onLoad)或者切入前台请求(onShow),根据需求修改,我这里是onLoad
onLoad(options) {
this.listInit()
},
methods:{
listInit(){
this.listQuery.page = 1
this.list = []
this.isBottom = false
this.getList()
},
async getList(val) {
let query = this.listQuery
//请求数据 ,此为封装后的请求接口方法
let list = await this.$request(‘接口地址’, 'get', query)
this.list = this.list.concat(list.data.item)
//判断是否请求完毕
if (list.data.item.length < this.listQuery.size) {
this.isBottom = true
}
},
// 滚到底部
lowerBottom() {
if (!this.isBottom) {
this.listQuery.page += 1
this.getList()
}
},
}
更多推荐
已为社区贡献4条内容
所有评论(0)