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


Posted in Javascript onFebruary 08, 2018

BetterScroll号称目前最好用的移动端滚动插件,因此它的强大之处肯定是存在的。要不...哈哈。个人感觉还是很好用的。这篇文章不是笼统的讲 BetterScroll ,而是单讲滚动,想要深入了解它,请移步这里 。

滚动原理

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

better-scroll 是什么滚动原理

better-scroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现,它的 API 设计基本兼容 iscroll,在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。

better-scroll 是基于原生 JS 实现的,不依赖任何框架。它编译后的代码大小是 63kb,压缩后是 35kb,gzip 后仅有 9kb,是一款非常轻量的 JS lib。

绿色部分为 wrapper,也就是父容器,它会有固定的高度。黄色部分为 content,它是父容器的第一个子元素,它的高度会随着内容的大小而撑高。那么,当 content 的高度不超过父容器的高度,是不能滚动的,而它一旦超过了父容器的高度,我们就可以滚动内容区了。横向滚动的原理一致就是将固定高度改为固定宽度。(这里就不??铝耍?/p>

纵向滚动

废话不多说,我们直接上代码。

<template>
 <div class="wrapper" ref="wrapper">
   <ul>
    <li v-for="item in 8">{{item}}</li>
   </ul>
 </div>
</template>
<script>
 import BScroll from 'better-scroll';
  export default {
   mounted() {
    this.$nextTick(() => {
     this.scroll = new BScroll(this.$refs.wrapper);
    });
   }
  };
</script>
<style type="text/css">
 .wrapper{
  overflow:hidden;
  height:100vh;
 }
 ul li{
  height:400px;
 }
</style>

这是一个Vue BetterScroll纵向滚动demo,这里需要注意的有两点。

  1. 只能有一层父级div,也就是容器
  2. 父级div要设置溢出隐藏,并且固定高度

横向滚动

横向滚动,相比纵向滚动需要动态的去获取滚动区的宽度,直接上代码。

<template>
 <div class="tab" ref="tab">
  <ul class="tab_content" ref="tabWrapper">
   <li class="tab_item" v-for="item in itemList" ref="tabitem">
     {{item.title}}
   </li>
  </ul>
 </div>
 </template>
 <script>
 import BScroll from 'better-scroll';
  export default {
   data() {
    return{
     itemList:[
     {
      'title':'关注'
     },
     {
      'title':'推荐'
     },
     {
      'title':'深圳'
     },
     {
      'title':'视频'
     },
     {
      'title':'音乐'
     },
     {
      'title':'热点'
     },
     {
      'title':'新时代'
     },
     {
      'title':'娱乐'
     },
     {
      'title':'头条号'
     },
     {
      'title':'问答'
     },
     {
      'title':'图片'
     },
     {
      'title':'科技'
     },
     {
      'title':'体育'
     },
     {
      'title':'财经'
     },
     {
      'title':'军事'
     },
     {
      'title':'国际'
     }
     ]
    }
   },
   created() {
    this.$nextTick(() => {
     this.InitTabScroll();
    });
   },
   methods:{
    InitTabScroll(){
     let width=0
     for (let i = 0; i <this.itemList.length; i++) {
       width+=this.$refs.tabitem[0].getBoundingClientRect().width; //getBoundingClientRect() 返回元素的大小及其相对于视口的位置
     }
     this.$refs.tabWrapper.style.width=width+'px'
     this.$nextTick(()=>{
       if (!this.scroll) {
        this.scroll=new BScroll(this.$refs.tab, {
         startX:0,
         click:true,
         scrollX:true,
         scrollY:false,
         eventPassthrough:'vertical'
        });
       }else{
        this.scroll.refresh()
       }
     });
    }
   }
  };
 </script>
 <style lang="scss" scoped>
 .tab{
  width: 100vw;
  overflow: hidden;
  padding:5px;
  .tab_content{
   line-height: 2rem;
   display: flex;
   .tab_item{
    flex: 0 0 60px;
    width:60px;
   } 
  }
 } 
 </style>

横向滚动需要注意。

  1. 只能有一层父级div,也就是容器
  2. 父容器要设置溢出隐藏并固定宽度
  3. 动态获取滚动区的宽度

因为最近项目需要,所以从网上查阅了许多资料也无法解决我的问题。 BetterScroll 官网也没有提供实际demo参考,所以就利用休息时间,写了这篇文章。希望能对你们有用。需要具体 demo 请移步,别忘了给个star啊,写文章不容易,给个赞呗!

tips:上文的代码可以直接使用,小伙伴们安装完依赖后可以直接copy测试哦~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于Jquery的将DropDownlist的选中值赋给label的实现代码
May 06 Javascript
JavaScript SetInterval与setTimeout使用方法详解
Nov 15 Javascript
jquery ajax 简单范例(界面+后台)
Nov 19 Javascript
JQuery与JS里submit()的区别示例介绍
Feb 17 Javascript
js中直接声明一个对象的方法
Aug 10 Javascript
jQuery中[attribute=value]选择器用法实例
Dec 31 Javascript
20分钟轻松创建自己的Bootstrap站点
May 12 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 Javascript
js实现表单及时验证功能 用户信息立即验证
Sep 13 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
Apr 21 Javascript
Vue2.0实现简单分页及跳转效果
Jul 29 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
Feb 08 #Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
Feb 08 #Javascript
使用veloticy-ui生成文字动画效果
Feb 08 #Javascript
js中let和var定义变量的区别
Feb 08 #Javascript
详解Nuxt.js Vue服务端渲染摸索
Feb 08 #Javascript
VUE 使用中踩过的坑
Feb 08 #Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
Feb 08 #Javascript
You might like
剖析 PHP 中的输出缓冲
2006/12/21 PHP
php字符串过滤strip_tags()函数用法实例分析
2019/06/24 PHP
laravel使用数据库测试注意事项
2020/04/10 PHP
DWR实现模拟Google搜索效果实现原理及代码
2013/01/30 Javascript
JavaScript和CSS通过expression实现Table居中显示
2013/06/28 Javascript
javascript用户注册提示效果的简单实例
2013/08/17 Javascript
基于jquery实现的省市区级联无ajax
2013/09/24 Javascript
JS+JSP checkBox 全选具体实现
2014/01/02 Javascript
ie 7/8不支持trim的属性的解决方案
2014/05/23 Javascript
js调试系列 源码定位与调试[基础篇]
2014/06/18 Javascript
Javascript 实现图片无缝滚动
2014/12/19 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
2015/03/18 Javascript
JavaScript获取当前网页标题(title)的方法
2015/04/03 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
2017/01/18 Javascript
jQuery模拟淘宝购物车功能
2017/02/27 Javascript
Vue.js路由vue-router使用方法详解
2017/03/20 Javascript
深入理解Angular中的依赖注入
2017/06/26 Javascript
使用uni-app开发微信小程序的实现
2019/12/13 Javascript
javascript中可能用得到的全部的排序算法
2020/03/05 Javascript
OpenLayers3实现地图显示功能
2020/09/25 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
js实现验证码干扰(静态)
2021/02/22 Javascript
[51:17]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第二场 10月30日
2020/10/31 DOTA
pyqt5让图片自适应QLabel大小上以及移除已显示的图片方法
2019/06/21 Python
Python基于pyjnius库实现访问java类
2020/07/31 Python
Python使用xpath实现图片爬取
2020/09/16 Python
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
英国领先的高级美容和在线皮肤诊所:Face the Future
2020/06/17 全球购物
大学生职业生涯规划书参考模板
2014/03/05 职场文书
入党自我鉴定
2014/03/25 职场文书
销售员岗位职责
2014/06/09 职场文书
国际会计专业求职信
2014/08/04 职场文书
JS实现刷新网页后之前浏览位置保持不变示例详解
2022/08/14 Javascript