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

使用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层，如果不加是无法滚动的

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于vue的fullpage.js单页滚动插件

    基于vue的fullpage.js使用方法,供大家参考,具体内容如下 功能概述 可实现移动端的单页滚动效果,支持横向滚动和纵向滚动 兼容性 目前还未进行大规模兼容性测试.有bug请提问至issues 安装 npm install vue-fullpage --save commonjs import VueFullpage from 'vue-fullpage' Vue.use(VueFullpage) 或 var vueFullpage = require('vue-fullpage') Vu

  • vue better-scroll插件使用详解

    什么是 better-scroll better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在 这里 .better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图.picker 等等. 在需要的文件中添加 import BScorll from 'better-scroll'; 引用的示例代码: let scroll = new BScroll(Dom对象, {//options startX: 0, star

  • 详解无限滚动插件vue-infinite-scroll源码解析

    最近在项目中遇到一个需求,有一个列表需要滚动加载,类似于微博的无限滚动.当时第一反应时监听滚动事件,在判断滚动到达底部时加载下一页,同时心里也清楚,监听滚动事件需要做好截流.顺手搜索了下发现有一个现成的插件vue-infinite-scroll,用法也很简单,于是乎就用了起来. 需求上线后,对它的实现挺好奇的,于是研究了一番源码,这篇文章就是源码解析笔记. 插件使用方法 这是一个 vue 的指令,按照 github 仓库上的介绍,用法挺简单的,例如: <div class="app&quo

  • vue滚动轴插件better-scroll使用详解

    跟做慕课网的vue高仿外卖项目中用到了一个很好用的插件BScroll,用来计算左侧menu栏对应右侧foods栏相应显示的食物区,如果不用插件就比较费事了,因此这里分享一下这个插件的简单使用: 一.项目中下载,并引入 在配置文件package.json中引入版本 "dependencies": { "better-scroll": "^0.1.7" } 然后进入项目目录,打开cmd更新配置 npm i (i是install缩写) 最后引入,比如我

  • vue使用better-scroll实现下拉刷新、上拉加载

    本文目的是为了实现列表的下拉刷新.上拉加载,所以选择了better-scroll这个库. 用好这个库,需要理解下面说明 必须包含两个大的div,外层和内层div 外层div设置可视的大小(宽或者高)-有限制宽或高 内层div,包裹整个可以滚动的部分 内层div高度一定大于外层div的宽或高,才能滚动 1.先开始写一个简单demo,最基本的代码架构 template <div ref="wrapper" class="wrapper"> <ul cl

  • vue滚动插件better-scroll使用详解

    vue滚动插件better-scroll使用详解

    本文实例为大家分享了vue滚动插件better-scroll的具体代码,供大家参考,具体内容如下 1. 概述 1.1 说明 better-scroll是一款重点解决移动端(已支持PC)各种滚动场景需求的插件.例如淘宝聚划算中的类型选择(女装/家纺/生鲜美食等),没有滚动条显示却实现了滚动功能. 1.2 better-scroll安装 npm install better-scroll --save 安装至项目中 1.3 better-scroll使用 better-scroll常见应用场景(列表

  • vue2.0 better-scroll 实现移动端滑动的示例代码

    vue2.0 better-scroll 实现移动端滑动的示例代码

    写在前面的话: 上一篇文章实现了滑动效果,这部分来试试左右联动效果的实现方法吧 效果:滑动右侧时,左侧也能有相应的变化:点击左侧时,右侧也能自动定位到相应的位置. 如下图所示界面,左侧为分栏,右侧为分栏详情. 滑动右边使左边联动的大概的思路: 1)要知道右侧的列表中,每一个分栏所占的高度,存进一个数组中. 2)实现左边联动,则必须要监控 "scroll"事件,获取其高度 3)将scroll 的高度与右侧分栏的高度进行比较,获得其 index 值 4)左侧的分类中,使与 index 相应

  • vue.js2.0 实现better-scroll的滚动效果实例详解

    什么是 better-scroll better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在这里 .better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图.picker 等等. <template> <div> <div class="goods"> <div class="menu-wrapper" ref="menuWr

  • vue使用 better-scroll的参数和方法详解

    格式:var obj = new BScroll(object,{[option1,],.,.}); 注意: 1.要确保object元素的高度比其父元素高 2.使用时,一定要确保object所在的dom渲染后,再用上面的语句,或者obj.refresh() Options 参数 startX: 0 开始的X轴位置 startY: 0 开始的Y轴位置 scrollY: true 滚动方向为 Y 轴 scrollX: true 滚动方向为 X 轴 click: true 是否派发click事件,通常

  • vue利用better-scroll实现轮播图与页面滚动详解

    vue利用better-scroll实现轮播图与页面滚动详解

    前言 better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图.picker 等等...所以本文主要给大家介绍了关于vue用better-scroll实现轮播图与页面滚动的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 1.安装better-scroll 在根目录中package.json的dependencies中添加: "better-scroll": "^0.1.15" 然后 npm i 安装. 2.封装代码

  • 详解 vue better-scroll滚动插件排坑

    详解 vue better-scroll滚动插件排坑

    BetterScroll号称目前最好用的移动端滚动插件,因此它的强大之处肯定是存在的.要不...哈哈.个人感觉还是很好用的.这篇文章不是笼统的讲 BetterScroll ,而是单讲滚动,想要深入了解它,请移步这里. 滚动原理 better-scroll 是什么滚动原理 better-scroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件.它的核心是借鉴的 iscroll 的实现,它的 API 设计基本兼容 iscroll,在 iscroll 的基础上又扩展了一些 featur

  • Vue + better-scroll 实现移动端字母索引导航功能

    vue+ better-scroll 实现移动端歌手列表字母索引导航.算是一个学习笔记吧,写个笔记让自己了解的更加深入一点. Demo:list-view,使用 chrome 手机模式查看.换成手机模式之后,不能滑动的话,刷新一下就 OK 了. Github: 移动端字母索引导航 效果图 配置环境 因为用到的是 vue-cli 和 better-scroll,所以首先要安装 vue-cli,然后再 npm 安装better-scroll. 简单介绍一下 better-scroll: better

随机推荐