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 相关文章推荐
jQuery学习笔记[1] jQuery中的DOM操作
Dec 03 Javascript
基于jQuery的左右滚动实现代码
Dec 03 Javascript
图标线性回归斜着移动到指定的位置
Aug 16 Javascript
js购物车实现思路及代码(个人感觉不错)
Dec 23 Javascript
一个检测表单数据的JavaScript实例
Oct 31 Javascript
使用正则表达式的格式化与高亮显示json字符串
Dec 03 Javascript
JavaScript控制网页层收起和展开效果的方法
Apr 15 Javascript
bootstrap实现每隔5秒自动轮播效果
Dec 20 Javascript
微信小程序 开发经验整理
Feb 15 Javascript
vue+axios新手实践实现登陆的示例代码
Jun 06 Javascript
详解ES6中的三种异步解决方案
Jun 28 Javascript
JavaScript利用html5新方法操作元素类名详解
Nov 27 Javascript
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递归使用示例(php递归函数)
2014/02/14 PHP
php获取excel文件数据
2017/04/21 PHP
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
Js切换功能的简单方法
2010/11/23 Javascript
JavaScript判断一个URL链接是否有效的实现方法
2011/10/08 Javascript
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
2012/01/15 Javascript
原生js写的放大镜效果
2012/08/22 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
2015/08/26 Javascript
js小数运算出现多位小数如何解决
2015/10/08 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
2016/10/11 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
JS使用正则表达式验证身份证号码
2017/06/23 Javascript
简单实现jQuery轮播效果
2017/08/18 jQuery
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
2018/02/06 Javascript
深入理解Vue Computed计算属性原理
2018/05/29 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
vue 子组件修改data或调用操作
2020/08/07 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
2020/08/10 Javascript
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
17个Python小技巧分享
2015/01/23 Python
Zookeeper接口kazoo实例解析
2018/01/22 Python
python字符串格式化方式解析
2019/10/19 Python
Python转换itertools.chain对象为数组的方法
2020/02/07 Python
python 常见的反爬虫策略
2020/09/27 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
CSS3中的5个有趣的新技术
2009/04/02 HTML / CSS
HTML5之SVG 2D入门5—颜色的表示及定义方式
2013/01/30 HTML / CSS
城市轨道专业个人求职信范文
2013/09/23 职场文书
2014银行授权委托书样本
2014/10/04 职场文书
党校个人总结
2015/03/04 职场文书
Python带你从浅入深探究Tuple(基础篇)
2021/05/15 Python
2022微信温控新功能上线
2022/05/09 数码科技
CSS文本阴影 text-shadow 悬停效果详解
2022/05/25 HTML / CSS