首先 van-list 是首次进就会触发加载的,滚动条滑倒底部不会再触发 一般是因为外部高度未固定导致拿不到滚动条位置
{{item}}
export default {
data() {
return {
// 初始化定义
loading: true,
finished: false,
searchData: {
pageSize: 10,
pageNo: 0
},
list: []
}
},
methods: {
onLoad(){
this.searchData.pageNo += 1
this.obtainList()
},
// 列表
obtainList () {
// 调用列表接口(此为演示)
findList(this.searchData).then(res => {
if (res.data.data && res.data.errcode == 0) {
if(this.searchData.pageNo == 1){
this.list = []
}
res.data.data.result.forEach((v) => {
this.list.push(v)
})
this.loading = false
if(this.searchData.pageNo >= res.data.data.totalPage) {
this.finished = true
}
}
})
}
}
}
.listClass {
width: 100%;
height: 100vh;
overflow-y: auto;
}
tab 切换的时候 需要重置下loading和finished状态
// 切换
activeClick (type) {
this.searchData.active = type
this.searchData.pageNo = 0
this.$refs.listout.scrollTop = 0
this.loading = true
this.finished = false
this.onLoad()
}
|