<ul
class="pagelist"
v-infinite-scroll="loadMore"
infinite-scroll-disabled="loading"
infinite-scroll-distance="10" >
<li v-for="item in list">{{ item }}</li>
</ul>
export defalut({
data() {
return {
loading:false,
list:[]
}
},
methods: {
loadMore() {
this.loading = true
}
}
})
填坑
1.重复加载。初次进入列表页，会加载两次或者多次数据
造成重复加载的原因，罪魁祸首是 infinite-scroll-disabled，在 loadMore 方法里 有一句 this.loading = true，把 infinite-scroll-disabled 的值设置为了true
它的作用就是，当你进入页面是，会检查如果第一次请求的数据没有撑满你的容器（list-data），就会立即再次执行 v-infinite-scroll 绑定的方法（loadMore），第二次没有撑满，会执行第三次
2.滚动时，不起作用
这种情况，就是在 loadMore 方法里没有写 this.loading = true，同时，第一次加载的数据也没有撑满容器。而我们的样式设置：
.pagelist{
height: 100%;
overflow-y: auto;
}
根本原因是因为，数据没有撑满容器就不会有滚动效果，所以就不会起作用了。
所以解决方案 就是要出现滚动条 ！！！ 容器高设置的小一点，每页的数据设置为20或者更多。
v-infinite-scroll无限滚动遇到的坑
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
