详解 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 相关文章推荐
同一个表单 根据要求递交到不同页面的实现方法小结
Aug 05 Javascript
jquery调用asp.net 页面后台的实现代码
Apr 27 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
Apr 22 Javascript
jquery实现div阴影效果示例代码
Sep 16 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
Jan 31 Javascript
自己动手写的javascript前端等待控件
Oct 30 Javascript
JS延时提示框实现方法详解
Nov 26 Javascript
js表单提交和submit提交的区别实例分析
Dec 10 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
Dec 27 Javascript
利用node.js制作命令行工具方法教程(一)
Jun 22 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
Oct 30 Javascript
详解React中setState回调函数
Jun 14 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
laravel5使用freetds连接sql server的方法
2018/12/07 PHP
PHP7 新增常量
2021/03/09 PHP
Extjs学习过程中新手容易碰到的低级错误积累
2010/02/11 Javascript
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
2010/05/27 Javascript
Ext对基本类型的扩展 ext,extjs,format
2010/12/25 Javascript
分享几个超级震憾的图片特效
2012/01/08 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
2013/09/21 Javascript
Json实现异步请求提交评论无需跳转其他页面
2014/10/11 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
2016/02/17 Javascript
详解angularjs 学习之 scope作用域
2018/01/15 Javascript
AngularJS ui-router刷新子页面路由的方法
2018/07/23 Javascript
浅谈ElementUI中switch回调函数change的参数问题
2018/08/24 Javascript
如何解决.vue文件url引用文件的问题
2019/01/18 Javascript
js计时事件实现圆形时钟
2020/03/25 Javascript
Vue实现随机验证码功能
2020/12/29 Vue.js
js正则表达式简单校验方法
2021/01/03 Javascript
Python 命令行非阻塞输入的小例子
2013/09/27 Python
Python简单生成随机姓名的方法示例
2017/12/27 Python
PySide和PyQt加载ui文件的两种方法
2019/02/27 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
Python 调用 Outlook 发送邮件过程解析
2019/08/08 Python
Win10 安装PyCharm2019.1.1(图文教程)
2019/09/29 Python
Python编程快速上手——Excel到CSV的转换程序案例分析
2020/02/28 Python
Python实现捕获异常发生的文件和具体行数
2020/04/25 Python
用于ETL的Python数据转换工具详解
2020/07/21 Python
英国最大的老式糖果店:A Quarter Of
2017/04/08 全球购物
法国大使拉杆箱官网:DELSEY Paris
2018/03/20 全球购物
Ancheer官方户外和运动商店:销售电动自行车
2019/08/07 全球购物
linux面试题参考答案(9)
2015/01/07 面试题
网上卖盒饭创业计划书
2014/01/26 职场文书
2014领导干部学习焦裕禄同志先进事迹思想汇报
2014/09/19 职场文书
2014年社区党建工作汇报材料
2014/11/02 职场文书
《中国机长》观后感:敬畏生命,敬畏职责
2019/11/12 职场文书
Python中的套接字编程是什么?
2021/06/21 Python
python 判断文件或文件夹是否存在
2022/03/18 Python