van-list @load问题_vanlist@load不执行

改了好久，逼得我差点自己写一个了。。

先检查一下，写的方法有没有错

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>
1
2
3
4
5
6
7
8
9

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;
            }
        },
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

css: 有同种情况点它

	听说父组件加 overflow: scroll;会出问题，包括html啊body啊加都会出问题
1

但是，其实遇到外面要加 < 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
},
1
2
3
4

• 手动改了，也没用，还是疯狂触发

 // 触底加载
async onLoad(){
   console.log("触底加载",this.loading);// true
   this.loading = true;
},
1
2
3
4
5

• 发现 finished = true 的时候，@Load 就不执行了，那就？安排吧！

 // 触底加载
async onLoad(){
   console.log("触底加载",this.loading);// true
   this.finished = true;
   await request();
   this.finished = false;
},
1
2
3
4
5
6
7

手动给他设置一个finished = true;这样在数据请求结束前就不会再次触发了，等到请求完成之后根据情况再设置回去。

• 有点剑走偏锋了哈哈哈哈，有什么好的其他方法欢迎指导~