最近利用vue和vantUI写h5的项目,遇到的问题总结:
问题:vantUI–tab切换或者筛选条件时上拉加载不触发上拉load事件
loading为false是加载中,finished为true是已结束状态,onLoad是执行函数(分页添加list的值)
这是我的页面
created () {
this.getDataList('COMPREHENSIVE', 0) //记得第一次进来获取一次数据
}
初始化loading为false,finished为false。
这是我data初始化数据,menuList是筛选的数据自己可以酌情更改
data () {
return {
loading: false, // 是否处于上拉加载状态
finished: false, // 是否已加载完所有数据
offset: 100, // 滚动条与底部距离小于offset时触发load事件
totalPage: 1, // 总页数
show: false,
checkIndex: 0,
menuList: [
{
val: 'COMPREHENSIVE',
text: '综合排序'
},
{
val: 'DUE_RATE',
text: '储蓄利率从高到低'
},
{
val: 'DISCOUNT_RATE',
text: '平台返利从高到低'
},
{
val: 'DAYS_OF_INTEREST',
text: '付息期限从短到长'
}
],
wealthList: [], // 财富列表数据
searchForm: { // 带搜索参数的总数据
sortField: 'COMPREHENSIVE',
pageSize: 10,
page: 1
}
}
},
加载的list,页面上有个切换的tab或者切换筛选条件,实现切换不同的类型,加载不同的list的功能。vant-ui的list就有个bug,当切换tab的时候,它的onload没方法自动触发。然而在当前标签页,如果列表已经加载完毕再去切换,onload就可以实现自动触发。
changeAct方法是用来点击切换的方法
methods: {
changeAct (type, index) {
this.searchForm.sortField = type //要搜索的条件
this.checkIndex = index //当前点击的第几个用来高亮当前筛选按钮
this.searchForm.page = 1 //筛选的时候必须初始化页数为1
this.wealthList = [] //必须清一下列表数组
this.loading = true// 下拉加载中
this.finished = false// 下拉结束
if (this.loading) {
this.getDataList('COMPREHENSIVE', 0)
}
},
//上拉加载事件
onLoad () {
if (this.wealthList.length < 10) {
this.finished = true // 已加载完
return
}
this.searchForm.page++
this.getDataList('COMPREHENSIVE', 0)
},
//获取数据
getDataList (type, index) {
this.$https('get', '/product/list', {
page: this.searchForm.page,
pageSize: this.searchForm.pageSize,
sortField: this.searchForm.sortField
}).then((res) => {
if (res.code === '1') {
if (this.wealthList.length >= res.data.total) {
this.finished = true // 已加载完
} else {
this.wealthList = this.wealthList.concat(res.data.items) //赋值数据
}
this.loading = false
this.show = false
} else {
this.$toast(res.message)
this.show = false
}
})
}
}
总结:在第一次onload的过程中将loading设置为false,则触发第二次loading,当执行到满足结束条件的时候,finished为true,结束加载。