第一次在模块下vue-infinite-scroll正常,能实现懒加载,切换到其他模块后回来当前模块vue-infinite-scroll失效,滚动到最底端不再生效

问题:

最近接受了离职同事的代码,发现一个bug,第一次在模块下vue-infinite-scroll正常,能实现懒加载。但是,当切换到其他模块后回来当前模块vue-infinite-scroll失效,滚动到最底端不再生效。

场景:

由于信息安全的原因,代码实现原理大致如下:

原因: 

纠结了好久之后发现是v-if在作怪,v-if每次会增加或删除DOM元素,当第二次切换回来的时候,vue-infinite-scroll指令初始化的时候还没找到对应的DOM元素,故不生效,无法触发loadMore方法。

解决:

将v-if换成v-show,因为v-show是通过样式display:none;来控制模块的显隐,vue-infinite-scroll指令初始化的时候不会找不到对应的DOM元素。

ps:小生初来乍到,如有错误,欢迎指出。

 

你可能感兴趣的:(前端vue)