第一次在模块下vue-infinite-scroll正常,能实现懒加载,切换到其他模块后回来当前模块vue-infinite-scroll失效,滚动到最底端不再生效
问题:最近接受了离职同事的代码,发现一个bug,第一次在模块下vue-infinite-scroll正常,能实现懒加载。但是,当切换到其他模块后回来当前模块vue-infinite-scroll失效,滚动到最底端不再生效。场景:由于信息安全的原因,代码实现原理大致如下:<template><div><div v-if="
·
问题:
最近接受了离职同事的代码,发现一个bug,第一次在模块下vue-infinite-scroll正常,能实现懒加载。但是,当切换到其他模块后回来当前模块vue-infinite-scroll失效,滚动到最底端不再生效。
场景:
由于信息安全的原因,代码实现原理大致如下:
<template>
<div>
<div v-if="curtPage == 1" @click="curtPage = 1">
<p>第一模块</p>
<div v-infinite-scroll="loadMore"
infinite-scroll-disabled="busy"
infinite-scroll-distance="10"
style="overflow-y:auto;height:343px;">
<li>1</li>
<li>2</li>
<li>3</li>
</div>
</div>
<div v-if="curtPage == 2" @click="curtPage = 2">
<p>第二模块</p>
<div>
<li>1</li>
<li>2</li>
<li>3</li>
</div>
</div>
<div v-if="curtPage == 3" @click="curtPage = 3">
<p>第三模块</p>
<div>
<li>1</li>
<li>2</li>
<li>3</li>
</div>
</div>
</div>
</template>
原因:
纠结了好久之后发现是v-if在作怪,v-if每次会增加或删除DOM元素,当第二次切换回来的时候,vue-infinite-scroll指令初始化的时候还没找到对应的DOM元素,故不生效,无法触发loadMore方法。
解决:
将v-if换成v-show,因为v-show是通过样式display:none;来控制模块的显隐,vue-infinite-scroll指令初始化的时候不会找不到对应的DOM元素。
ps:小生初来乍到,如有错误,欢迎指出。
更多推荐
已为社区贡献1条内容
所有评论(0)