[youzan/vant]list 无限加载修改loading和finished值无法再次触发load方法

2024-05-22 3 views
5

当list无限加载和tab组件一起使用,刚开始进入页面,第一次切换各个tab的时候onload方法会触发,但是反复切换的时候,重置loading为false,finished为false,onload方法不再触发

list组件提供的check方法如何再次触发onload方法,改变finished和loading的值希望可以再次触发onload方法 Environment

  • Device: vue
  • Browser: chorme
  • Vant Version: v1.4.3

回答

1

麻烦提供一下 jsfiddle

9

不要添加return代码去阻止自动执行, onLoad内进入 设置this.loading = true ajax请求成功设置 this.loading = false, 没有数据设置finished true,如果添加判断loading return就会出现这样的情况,切换status直接调用onLoad

9

不要添加return代码去阻止自动执行, onLoad内进入 设置this.loading = true ajax请求成功设置 this.loading = false, 没有数据设置finished true,如果添加判断loading return就会出现这样的情况,切换status直接调用onLoad

我其实是想知道onload触发的方式,因为我切换tab的时候如果主动调用onload方法,那么onload方法可能执行了两遍(主动调用执行一遍,被动执行一遍),虽然尝试切换tab的时候去改变loading和finished状态以便再次触发onload方法,但是并不可行。

4

麻烦提供一下 jsfiddle

好的,稍晚一些我会提供

1

切换 tab 时,把 loading 改成 false 后,再调用 check 方法,就会执行判断是否需要调用 load 方法

6

切换 tab 时,把 loading 改成 false 后,再调用 check 方法,就会执行判断是否需要调用 load 方法

谢谢~

5

切换 tab 时,把 loading 改成 false 后,再调用 check 方法,就会执行判断是否需要调用 load 方法

抱歉,麻烦您再看下demo,我已经加了check方法,但是并没有效果,点击几次后,还是像之前一样,问题依然存在。https://jsfiddle.net/13814066642/eywraw8t/466609/

4

check方法确实有问题,压根不触发。我试了最新的1.4.4版本 @chenjiahan

3

check方法确实有问题,压根不触发。还是手动调用一下onLoad方法吧

如果手动调用,很多时候请求了两遍,导致重复数据,如果改成手动调用,那必须阻止组件主动调用load方法,头大(ノω<)

1

check方法确实有问题,压根不触发。还是手动调用一下onLoad方法吧

如果手动调用,很多时候请求了两遍,导致重复数据,如果改成手动调用,那必须阻止组件主动调用load方法,头大(ノω<)

image image 这是我的代码,以前切换tab是存在你说的重复请求的问题,axios进入前设置loading为true就不会重复请求了,他的这个逻辑是检测是否需要加载下一页,高度不够满屏自动加载了,loading是true就不会执行@load方法了

2

image immediate-check 不需要关闭,开启自动加载比较合适,以前我也觉得这个组件有bug,后面发现是我没搞清他的loading finished状态,代码就这么点就够了

3

切换的时候应该要把finished变成false,才能重新触发load

4

问题: tab切换没有触发list的load事件,手动调用check方法,this.$refs.list.check()并不起作用? 解决:

setTimeout(()=>{
     this.$refs.list.check()
 },100)
8

切换的时候应该要把finished变成false,才能重新触发load

感谢老哥的思路,我是自己写的tab,在自己切换的方法里面把finished设置为false,就有效了。

7

切换的时候应该要把finished变成false,才能重新触发load

老哥这句话真的救命啊,要不我还一直卡在bug里 -,-||