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

 更新时间:2018年06月07日 09:38:09   作者:JonsonXu  
better scroll可以实现轮播图和页面滚动,是移动端滚动插件,这篇文章主要介绍了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文件如何转换成base64并去除多余的文件类型前缀

    Vue文件如何转换成base64并去除多余的文件类型前缀

    这篇文章主要介绍了Vue文件如何转换成base64并去除多余的文件类型前缀问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue3使用ref解决GetElementById为空的问题

    Vue3使用ref解决GetElementById为空的问题

    今天遇到一个问题,就是在Vue3组件中需要获取template中的元素节点,使用GetElementById返回的却是null,网上查找了好些资料,才发需要使用ref,所以本文给大家介绍了Vue3组件中如何使用ref解决GetElementById为空的问题,需要的朋友可以参考下
    2023-12-12
  • Vue项目配置跨域访问和代理proxy设置方式

    Vue项目配置跨域访问和代理proxy设置方式

    这篇文章主要介绍了Vue项目配置跨域访问和代理proxy设置方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue-router启用history模式下的开发及非根目录部署方法

    vue-router启用history模式下的开发及非根目录部署方法

    这篇文章主要介绍了vue-router启用history模式下的开发及非根目录部署方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • axios取消请求CancelToken的用法示例代码

    axios取消请求CancelToken的用法示例代码

    Axios提供了取消请求的功能,可以通过使用CancelToken来实现,这篇文章主要给大家介绍了关于axios取消请求CancelToken的用法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-10-10
  • 详解webpack + vue + node 打造单页面(入门篇)

    详解webpack + vue + node 打造单页面(入门篇)

    本篇文章主要介绍了详解webpack + vue + node 打造单页面(入门篇) ,非常具有实用价值,需要的朋友可以参考下
    2017-09-09
  • 详解从vue-loader源码分析CSS Scoped的实现

    详解从vue-loader源码分析CSS Scoped的实现

    这篇文章主要介绍了详解从vue-loader源码分析CSS Scoped的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • vue中keep-alive内置组件缓存的实例代码

    vue中keep-alive内置组件缓存的实例代码

    这篇文章主要介绍了vue中的keep-alive内置组件缓存,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • 在Vue中实现父组件控制子组件的值的两种方法

    在Vue中实现父组件控制子组件的值的两种方法

    在Vue开发中,父组件和子组件之间的数据传递是一项常见的任务,本文将介绍如何在Vue中实现父组件控制子组件的值,以便灵活地管理和更新子组件的数据,文中有详细的代码讲解,需要的朋友可以参考下
    2023-11-11
  • vue3点击按钮下载文件功能的代码实现

    vue3点击按钮下载文件功能的代码实现

    在写vue项目时,有个需求是点击表格中某一行的下载按钮,然后开始下载这一行对应的文件,所以本文小编给大家介绍了使用vue3实现点击按钮下载文件功能,文中有详细的代码示例供大家参考,需要的朋友可以参考下
    2024-01-01

最新评论