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 相关文章推荐
JavaScript 入门·JavaScript 具有全范围的运算符
Oct 01 Javascript
jQuery 处理表单元素的代码
Feb 15 Javascript
JavaScript中的面向对象介绍
Jun 30 Javascript
JavaScript+CSS控制打印格式示例介绍
Jan 07 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
Sep 14 Javascript
基于jQuery实现简单的折叠菜单效果
Nov 23 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
Dec 13 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
Oct 20 Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
Feb 02 Javascript
详解JS模块导入导出
Dec 20 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
Jul 24 Javascript
jquery插件实现悬浮的菜单
Apr 24 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 Google的translate API代码
2008/12/10 PHP
PHP数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
php实现屏蔽掉黑帽SEO的搜索关键字
2015/04/15 PHP
学习php设计模式 php实现备忘录模式(Memento)
2015/12/09 PHP
PHP实现git部署的方法教程
2017/12/19 PHP
通过PHP实现获取访问用户IP
2020/05/09 PHP
Tinymce+jQuery.Validation使用产生的BUG
2010/03/29 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
js实现的map方法示例代码
2014/01/13 Javascript
jquery对象和javascript对象即DOM对象相互转换
2014/08/07 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
2016/04/29 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
Angular的模块化(代码分享)
2016/12/26 Javascript
面试常见的js算法题
2017/03/23 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
2017/06/17 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
2017/06/25 Javascript
nodejs实现解析xml字符串为对象的方法示例
2018/03/14 NodeJs
JS中移除非数字最多保留一位小数
2018/05/09 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
前端面试知识点目录一览
2019/04/15 Javascript
npx create-react-app xxx创建项目报错的解决办法
2020/02/17 Javascript
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
跟老齐学Python之使用Python操作数据库(1)
2014/11/25 Python
Python打印“菱形”星号代码方法
2018/02/05 Python
美国乡村商店:Plow & Hearth
2016/09/12 全球购物
汽车电子与维修专业大学生求职信
2013/09/28 职场文书
物流专业大学应届生求职信
2013/11/03 职场文书
建筑施工员岗位职责
2013/11/26 职场文书
数控技术应用个人求职信范文
2014/02/03 职场文书
《飞向蓝天的恐龙》教学反思
2014/04/09 职场文书
寒假家长评语大全
2014/04/16 职场文书
触电现场处置方案
2014/05/14 职场文书
教师个人培训总结
2015/02/11 职场文书
学生犯错保证书
2015/05/09 职场文书
OpenCV全景图像拼接的实现示例
2021/06/05 Python