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插件开发 菜单插件开发
May 03 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
Apr 17 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
Dec 26 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
Feb 03 Javascript
JavaScript操作URL的相关内容集锦
Oct 29 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
前端主流框架vue学习笔记第一篇
Jul 26 Javascript
深入理解ES6中let和闭包
Feb 22 Javascript
vue如何通过id从列表页跳转到对应的详情页
May 01 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
Apr 29 Javascript
vue.js路由mode配置之去掉url上默认的#方法
Nov 01 Javascript
javascript Canvas动态粒子连线
Jan 01 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
ThinkPHP实现批量删除数据的代码实例
2014/07/02 PHP
php 如何获取文件的后缀名
2016/06/05 PHP
php实现数据库的增删改查
2017/02/26 PHP
PHP实现PDO操作mysql存储过程示例
2019/02/13 PHP
一些有关检查数据的JS代码
2006/09/07 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
JavaScript数据结构之数组的表示方法示例
2017/04/12 Javascript
JavaScript中立即执行函数实例详解
2017/11/04 Javascript
javaScript和jQuery自动加载简单代码实现方法
2017/11/24 jQuery
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
Postman内建变量常用方法实例解析
2020/07/28 Javascript
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
[45:46]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS DT
2014/05/23 DOTA
windows系统中python使用rar命令压缩多个文件夹示例
2014/05/06 Python
零基础写python爬虫之爬虫编写全记录
2014/11/06 Python
使用paramiko远程执行命令、下发文件的实例
2017/10/01 Python
python密码错误三次锁定(实例讲解)
2017/11/14 Python
Python 机器学习库 NumPy入门教程
2018/04/19 Python
Python实现E-Mail收集插件实例教程
2019/02/06 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
Python:合并两个numpy矩阵的实现
2019/12/02 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
Python 实现黑客帝国中的字符雨的示例代码
2020/02/20 Python
Anaconda+VSCode配置tensorflow开发环境的教程详解
2020/03/30 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
基于python实现删除指定文件类型
2020/07/21 Python
关于python中导入文件到list的问题
2020/10/31 Python
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(一)
2013/01/21 HTML / CSS
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
英国排名第一的最新设计师品牌手表独立零售商:TIC Watches
2016/09/24 全球购物
经济管理专业自荐信
2013/12/30 职场文书
求职面试个人自我评价
2014/02/28 职场文书
初中作文评语大全
2014/04/23 职场文书
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
关于python中模块和重载的问题
2021/11/02 Python