vue better scroll 无法滚动的解决方法

前端之家收集整理的这篇文章主要介绍了vue better scroll 无法滚动的解决方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

使用vue+better scroll

今天实现切换用户查询用户订单列表的一个功能,在实例化betterscroll时,因为有的用户没有订单,切换用户后会出现订单列表无法滚动的问题。先放代码

502_8@

最近没有订单

@H_502_8@ @H_502_8@ @H_502_8@
{ if(this.orderLists.length%10 == 0) { // 判断是否还有订单,但没有考虑用户有10的整倍数条订单的情况 this.orderSize += 10; this.resentOrders(); return; } else { Toast("没有更多了") } }) }, @H_502_8@

找了半天原因,最后发现应该这样:

502_8@

最近没有订单

@H_502_8@ @H_502_8@ @H_502_8@

把v-if、v-else换成 v-show就好啦

ps:

1. 检查HTML 以及css是否有写错的地方,有时候写错会导致html中dom无法正确生成,而better-scroll是需要dom完全加载完毕后才可以正确滚动的

2. html和css全部写正确的时候还是无法滚动

检查better-scroll是否初始化时机太早(dom没有完全生成,已经初始化了),可以使用vue的$nextTick来异步初始化better-scroll

3. better-scroll在使用的时候,滚动只作用于第一层元素,因此在使用better-scroll时,better要加上一层div(div下面再放其他东西,better里不能有同级的2及以上div)

这里要加上seller-content层,如果不加是无法滚动的

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/vue/31989.html

猜你在找的Vue相关文章