Vant列表list使用方法
Vant列表list的使用方法和注意事项
下列代码为允许下拉刷新
1.使用组件
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<van-list
v-model="loading"
:finished="finished"
offset="20"
finished-text="没有更多了"
@load="onLoad"
:immediate-check="false"
>
<van-cell v-for="item in list" :key="item.id" :title="item" />
</van-list>
</van-pull-refresh>
2.加载事件的方法
onLoad() {
setTimeout(() => {
if(this.refreshing){
this.page = 1
this.refreshing = false
}
// 如果为false 才能执行 否则直接忽略这次请求
if (!this.list_lock) {
this.list_lock = true
// 调用接口
this.getList()
.then((result)=>{
// 如果返回的数据是第一页的数据，那么先清除当前列表防止出现因多次一页接口数据重复
if (result.data.current == 1) {
this.list = []
}
this.finished = true
})
.catch()
.finally(() => {
this.list_lock = false
})
}
// 加载状态结束
this.loading = false
}, 1000)
},
3.下拉刷新事件
onRefresh(){
this.list = []
// 上方加载动画
this.loading = true
// 更改为未完成状态触发触底加载
this.finished = false
this.onLoad() //触发获取事件的方法
}
调取接口
getList() {
Maintenance_page.getList()
.then((res) => {
if (res.code == '0' && this.userId) {
// 如果是通过下拉刷新的方式刷新页面
this.loading = false
if (this.page == 1) {
this.list = res.data.deviceInfos
} else {
this.list = [...this.list, ...res.data.deviceInfos]
}
this.total = res.data.total
let sum = this.page * this.pageSize
if (sum >= this.total) {
this.finished = true
} else {
this.finished = false
}
this.page++
} else {
this.loading = false
}
})
.catch((err) => {
this.loading = false
console.log('getList方法错误信息 :>> ', err)
})
},
无论是下拉刷新、切换标签栏、搜索内容等涉及刷新操作的均采用覆盖式更新，且刷新后页码不进行增加，仅单纯将列表初始化，后续需要上拉加载的时候调用onLoad自动执行加载，每加载一次后针对加载内容进行判断，是否finished，然后对页码进行操作，最后设置loading状态为false解除加载状态。