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 相关文章推荐
URL编码转换,escape() encodeURI() encodeURIComponent()
Dec 27 Javascript
Document:getElementsByName()使用方法及示例
Oct 28 Javascript
jQuery中DOM操作实例分析
Jan 23 Javascript
高性能JavaScript循环语句和条件语句
Jan 20 Javascript
Javascript的比较汇总
Jul 25 Javascript
微信小程序 SocketIO 实例讲解
Oct 13 Javascript
webpack常用配置项配置文件介绍
Nov 07 Javascript
利用js的闭包原理做对象封装及调用方法
Apr 07 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
Sep 18 Javascript
详解ES6 Promise对象then方法链式调用
Oct 20 Javascript
vue写h5页面的方法总结
Feb 12 Javascript
vue请求本地自己编写的json文件的方法
Apr 25 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中cookie的作用域
2008/03/27 PHP
一道关于php变量引用的面试题
2010/08/08 PHP
PHP设计模式之装饰者模式
2012/02/29 PHP
ThinkPHP模板之变量输出、自定义函数与判断语句用法
2014/11/01 PHP
php采集自中央气象台范围覆盖全国的天气预报代码实例
2015/01/04 PHP
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
PHP经典算法集锦【经典收藏】
2016/09/14 PHP
laravel ORM 只开启created_at的几种方法总结
2018/01/29 PHP
Laravel框架中缓存的使用方法分析
2019/09/06 PHP
PHP连续签到功能实现方法详解
2019/12/04 PHP
JavaScript中使用构造函数实现继承的代码
2010/08/12 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
2014/10/17 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
2016/06/06 Javascript
安装vue-cli报错 -4058 的解决方法
2017/10/19 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
vue2.0 路由模式mode=&quot;history&quot;的作用
2018/10/18 Javascript
JavaScript Date对象功能与用法学习记录
2020/04/28 Javascript
python将字符串转换成数组的方法
2015/04/29 Python
理解Python垃圾回收机制
2016/02/12 Python
python实现飞机大战
2018/09/11 Python
解决Python获取字典dict中不存在的值时出错问题
2018/10/17 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
Python urlopen()和urlretrieve()用法解析
2020/01/07 Python
Python抓包并解析json爬虫的完整实例代码
2020/11/03 Python
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
PHP面试题大全
2015/10/16 面试题
linux面试题参考答案(6)
2016/06/23 面试题
奥巴马上海演讲稿
2014/09/10 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
学校党支部承诺书
2015/04/30 职场文书
浅谈redis缓存在项目中的使用
2021/05/20 Redis
OpenCV-Python实现轮廓的特征值
2021/06/09 Python
详解NodeJS模块化
2021/06/15 NodeJs
Python加密与解密模块hashlib与hmac
2022/06/05 Python