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


Posted in Javascript onJune 07, 2018

使用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 better scroll 无法滚动的解决方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
popdiv
Jul 14 Javascript
date.parse在IE和FF中的区别
Jul 29 Javascript
js函数的延迟加载实现代码
Oct 11 Javascript
解决checkbox的attr(checked)一直为undefined问题
Jun 16 Javascript
JS中使用sort结合localeCompare实现中文排序实例
Jul 23 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
Sep 04 Javascript
浅谈Angular 的变化检测的方法
Mar 01 Javascript
微信小程序定义和调用全局变量globalData的实现
Nov 01 Javascript
如何正确理解vue中的key详解
Nov 02 Javascript
js实现图片实时时钟
Jan 15 Javascript
jQuery冲突问题解决方法
Jan 19 jQuery
vue translate peoject实现在线翻译功能【新手必看】
Jun 07 #Javascript
JavaScript 正则命名分组【推荐】
Jun 07 #Javascript
详解create-react-app 自定义 eslint 配置
Jun 07 #Javascript
vue.js实现标签页切换效果
Jun 07 #Javascript
js数组去重的N种方法(小结)
Jun 07 #Javascript
vue+axios新手实践实现登陆的示例代码
Jun 06 #Javascript
vue2.0实现音乐/视频播放进度条组件
Jun 06 #Javascript
You might like
微博短链接算法php版本实现代码
2012/09/15 PHP
详解php的魔术方法__get()和__set()使用介绍
2012/09/19 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
用JQuery 实现的自定义对话框
2007/03/24 Javascript
JQuery触发radio或checkbox的change事件
2012/12/18 Javascript
如何用js控制frame的隐藏或显示的解决办法
2013/03/20 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
2014/05/07 Javascript
jQuery中ajax的load()与post()方法实例详解
2016/01/05 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
2016/07/22 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
想用好React的你必须要知道的一些事情
2017/07/24 Javascript
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
Vue组件中slot的用法
2018/01/30 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
2018/04/10 Javascript
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
学习node.js 断言的使用详解
2019/03/18 Javascript
Python中unittest模块做UT(单元测试)使用实例
2015/06/12 Python
基于python绘制科赫雪花
2018/06/22 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
在Python中定义一个常量的方法
2018/11/10 Python
PyQt5创建一个新窗口的实例
2019/06/20 Python
python实现beta分布概率密度函数的方法
2019/07/08 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
在服务器上安装python3.8.2环境的教程详解
2020/04/26 Python
实习会计求职自荐信范文
2014/03/10 职场文书
诚信承诺书模板
2014/05/26 职场文书
建筑工程质量通病防治方案
2014/06/08 职场文书
投资申请报告
2015/05/19 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript
一篇文章告诉你如何实现Vue前端分页和后端分页
2022/02/18 Vue.js
Java完整实现记事本代码
2022/06/16 Java/Android
windows系统安装配置nginx环境
2022/06/28 Servers