Skip to content

Multiple v-show controlled InfiniteLoading not working since v2.4.1 #204

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
shixy96 opened this issue Nov 23, 2018 · 4 comments
Closed

Multiple v-show controlled InfiniteLoading not working since v2.4.1 #204

shixy96 opened this issue Nov 23, 2018 · 4 comments
Labels

Comments

@shixy96
Copy link

shixy96 commented Nov 23, 2018

Version

2.4.0

Vue.js version

2.2.1

Reproduction Link

can not work after 2.4.0: https://jsfiddle.net/shixy007/ye04kja3/22/
work in 2.3.5: https://jsfiddle.net/shixy007/ye04kja3/20/

Steps to reproduce

切换标签

What is Expected?

What is actually happening?

在 2.3 版本中,v-show 下使用 InfiniteLoading ,可以正常加载;
在 2.4.0 之后的版本中, v-show 下使用 InfiniteLoading , 切换之后不能正常加载。

@PeachScript
Copy link
Owner

你提供的两个重现链接效果是一模一样的,如果步骤只需要切换标签的话。事实上,这正是『期望中的结果』,因为目前没有一个高效且兼容性良好的方案来监听元素是否可见,所以 InfiniteLoading 自然也无法在自身从不可见变为可见时触发一次加载。

对于此类场景,大概有两种解决方案:

  1. 三个 Tab 共用一个 InfiniteLoading 组件,在切换时修改 identifier 达到通知组件重新加载的目的,就像文档中的 filter demo 一样;如果需要保留当前的加载状态而不是在切换时直接情况数据,建议通过官方提供的 keep-alive 以及 component 组件来实现选项卡功能以达到更好的性能;
  2. 使用 v-if 替代 v-show(对渲染性能应该有所影响)。

@shixy96
Copy link
Author

shixy96 commented Nov 23, 2018

多谢解答,第一种方案很简洁有效。
另外,上面复现步骤有误,实际遇到的情况是初始的数据渲染后超过页面的 offsetHeight ,需要滚动才能触发 InfiniteLoading 的加载,在 2.3.5 版本中,可以正常实现加载,而在 2.4.1版本中,只有标签1能实现正常加载,标签2和标签3滚动到底部后不能实现 InfiniteLoading 的加载。
下面是复现链接:
v 2.3.5 : https://jsfiddle.net/ye04kja3/35/
v 2.4.1: https://jsfiddle.net/ye04kja3/31/
再给两张 gif 图:
img
img

@PeachScript PeachScript changed the title InfiniteLoading not work with v-show in version 2.4.0 Multiple v-show controlled InfiniteLoading not working since v2.4.1 Nov 23, 2018
@PeachScript
Copy link
Owner

@shixy96 不客气。我根据你的步骤在本地再次确认了一下你所描述的问题,发现确实存在,这应该是 v2.4.0 => v2.4.1 改造节流器时出现的 Bug,我会尽快进行修复,感谢反馈!

@PeachScript
Copy link
Owner

@shixy96 ,我已经发布了一个新版本 v2.3.4 来修复此问题,如果使用时仍然存在问题请反馈给我,此 issue 就暂时关闭了。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants