改了好久,逼得我差点自己写一个了。。
先检查一下,写的方法有没有错
html:
<van-list finished-text="没有更多了"
@load="onLoad"
v-model = "loading"
:finished="finished"
offset="100"
:immediate-check = false
>
<list-component v-for="item in hisTripList" :list="item"></list-component>
</van-list>
js
export default {
data(){
return{
loading: false,
finished: false,
hisTripList: computed(()=>this.$store.getters.hisTripList)
}
},
methods:{
// 触底加载
async onLoad(){
console.log("触底加载",this.loading);
await this.addList();
},
// 添加
async addList(){
await this.$store.dispatch('user/changeHisTripList',{ hisPageIndex });
console.log("加页完成");
this.loading = false;
this.finished = !this.$store.getters.hisNextPage;
}
},
}
}
css: 有同种情况点它
听说父组件加 overflow: scroll;会出问题,包括html啊body啊加都会出问题
但是,其实遇到外面要加 < van-pull-refresh >标签的话,是需要加overflow: scroll 的,可以先把这个给删了测试,搞定再加上 < van-pull-refresh >
确认一下,要是还有问题,那就看看我的bug了~
第一个问题:@load 不触发
- 检查一下,你的load函数里的代码,或者函数里调用的函数,有没有报错的。
(我就是代码报错了呜呜呜呜呜呜) - finished = true 或者 loading = true 的时候,@load是不触发的,检查一下初始化设置,或者生命周期函数(mounted,created)里面的设置
第二个问题:@load 疯狂触发
- 一开始以为是 offset 距离太大的问题,改了还是不对劲
- 反复看了官网,@load一旦调用,loading=true;而loading=true,@load就不触发。逻辑没有问题啊!
- 我还输出了一下,发现全都是false
// 触底加载
async onLoad(){
console.log("触底加载",this.loading);// false
},
- 手动改了,也没用,还是疯狂触发
// 触底加载
async onLoad(){
console.log("触底加载",this.loading);// true
this.loading = true;
},
- 发现 finished = true 的时候,@Load 就不执行了,那就?安排吧!
// 触底加载
async onLoad(){
console.log("触底加载",this.loading);// true
this.finished = true;
await request();
this.finished = false;
},
手动给他设置一个finished = true;这样在数据请求结束前就不会再次触发了,等到请求完成之后根据情况再设置回去。
- 有点剑走偏锋了哈哈哈哈,有什么好的其他方法欢迎指导~