search

PeachScript / vue-infinite-loading

An infinite scroll plugin for Vue.js.
https://peachscript.github.io/vue-infinite-loading/
MIT License
2.67k stars 370 forks source link

infiniteLoading not work under transition without scrolling #207

Open shixy96 opened 6 years ago

shixy96 commented 6 years ago

Version

2.4.3

Vue.js version

2.2.1

Reproduction Link

https://jsfiddle.net/shixy007/eywraw8t/479224/

Steps to reproduce

  1. click '/home' link
  2. click '/fool' link
  3. click '/home' link
  4. click '/fool' link

    What is Expected?

    每次点击 '/fool' 后都应该触发 infinite 进行加载

What is actually happening?

第二次点击 '/fool' 后都没有触发 infinite 进行加载；

Compared 1

  1. click '/home' link
  2. scroll down
  3. click '/fool' link
  4. click '/home' link
  5. scroll down
  6. click '/fool' link 加载正常

img

Compared 2

在去掉包裹 router-view 的 transition 之后，加载正常 https://jsfiddle.net/shixy007/eywraw8t/479226/

PeachScript commented 6 years ago

@shixy96 抱歉之前看到这个 issue 的时候以为是指列表元素的过渡动画，传达了错误的信息，为避免给其他人造成困扰所以上一条评论我先删除了。

重新看了一下你提供的 reproduce link，按照官方的文档通过 keep-alive 组件的 include/exclude 来控制组件是否缓存即可正常工作。

shixy96 commented 6 years ago

hi，@PeachScript ，我不认为是 keep-alive 缓存的问题，我觉得还是过渡动画的问题，这里有一个新的链接，复现的步骤和前面一样 https://jsfiddle.net/shixy007/eywraw8t/482560/

PeachScript commented 6 years ago

这个示例是基于你一开始的 fiddle 修改的，正确使用条件式 keep-alive 可以正常工作：https://jsfiddle.net/oq7m0brn/ 这个示例是基于你刚刚提供的 fiddle 修改的，可以看到即便移除了 transition，还是不能正常工作：https://jsfiddle.net/k41s2d30/

所以我推测有可能是 vue-router 在多个命名视图渲染的切换过程中有什么特性影响到该插件的加载判断了，后续我会再验证一下该推测；如果你有其他发现也请更新到这里。

Yee2 commented 5 years ago

我也出现同样的情况 在添加过渡的情况下 会出现无法触发的情况，但是如果直接进去的是这个带有无限加载的页面则可以正常触发，从其他tab点进去则不行

middle21 commented 4 years ago

I also have the same problem.Going directly to the page that contains the vue-infinite-loading component, everything works fine. Going to another page and then to the page with the vue-infinite-loading doesn't load the items (doesn't even make the request) if the previous page was not scrolled down.

As soon as a remove the transition everything works fine.

<!-- <transition name="fade"> -->
      <router-view></router-view>
<!-- </transition> -->

Any solutions to this ?

Welcius commented 4 years ago

I can reproduce the same thing that happens to @middleftw. Deleting the transition around the router view fixes the issue, but it shouldn't be like that.

dbettini commented 4 years ago

This also happens if component is used inside v-show (display: none)

matinwd commented 4 years ago

Any solution here? i have same with Uncaught (in promise) TypeError: can't access property "loaded", $state is undefined error

matinwd commented 4 years ago

Also using vue transitions