vue better scroll 无法滚动的解决方法
使用vue+better scroll
今天实现切换用户后查询用户订单列表的一个功能,在实例化betterscroll时,因为有的用户没有订单,切换用户后会出现订单列表无法滚动的问题。先放代码:
<!-- 订单列表 --> <div id="order-list" ref="scrollWrap"> <ul v-if="orderLists.length > 0"> <li v-for="(orderList,index) in orderLists" :key="index"> <div class="order-info"> 订单信息 </div> </li> </ul> <div class="no-orders" v-else> <p>最近没有订单</p> </div> </div>
// init better scroll
initScroll() {
let self = this;
if (!this.scroll) {
this.scroll = new BScroll(self.$refs.scrollWrap, {
bounceTime: 200,
click: true,
mouseWheel: true,
scrollbar: { // 滚动条
fade: true,
},
pullUpLoad: { // 上拉加载
threshold: -40,
}
})
} else {
this.scroll.refresh();
}
this.scroll.on('pullingUp', () => {
if(this.orderLists.length%10 == 0) {
// 判断是否还有订单,但没有考虑用户有10的整倍数条订单的情况
this.orderSize += 10;
this.resentOrders();
return;
} else {
Toast("没有更多了")
}
})
},
找了半天原因,最后发现应该这样:
<!-- 订单列表 --> <div id="order-list" ref="scrollWrap"> <ul v-show="orderLists.length > 0"> <li v-for="(orderList,index) in orderLists" :key="index"> <div class="order-info"> 订单信息 </div> </li> </ul> <div class="no-orders" v-show="orderLists.length === 0" > <p>最近没有订单</p> </div> </div>
把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层,如果不加是无法滚动的

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 详解无限滚动插件vue-infinite-scroll源码解析
- 详解 vue better-scroll滚动插件排坑
- 基于vue的fullpage.js单页滚动插件
- vue滚动轴插件better-scroll使用详解
- vue利用better-scroll实现轮播图与页面滚动详解
- vue使用 better-scroll的参数和方法详解
- vue better-scroll插件使用详解
- vue.js2.0 实现better-scroll的滚动效果实例详解
- vue2.0 better-scroll 实现移动端滑动的示例代码
- Vue + better-scroll 实现移动端字母索引导航功能
- vue使用better-scroll实现下拉刷新、上拉加载
- vue滚动插件better-scroll使用详解
相关文章
Vue3使用ref解决GetElementById为空的问题
今天遇到一个问题,就是在Vue3组件中需要获取template中的元素节点,使用GetElementById返回的却是null,网上查找了好些资料,才发需要使用ref,所以本文给大家介绍了Vue3组件中如何使用ref解决GetElementById为空的问题,需要的朋友可以参考下2023-12-12
vue-router启用history模式下的开发及非根目录部署方法
这篇文章主要介绍了vue-router启用history模式下的开发及非根目录部署方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-12-12
详解webpack + vue + node 打造单页面(入门篇)
本篇文章主要介绍了详解webpack + vue + node 打造单页面(入门篇) ,非常具有实用价值,需要的朋友可以参考下2017-09-09
详解从vue-loader源码分析CSS Scoped的实现
这篇文章主要介绍了详解从vue-loader源码分析CSS Scoped的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-09-09


最新评论