better-scroll 是一个页面滚动插件，用它可以很方便的实现下拉刷新，锚点滚动等功能。

实现原理：父容器固定高度，并设置 overflow：hidden，子元素超出父元素高度后将被隐藏，超出部分可滚动且没有滚动条。

github地址

一. 立即使用

<body>

<div id="wrapper">

<ul>

   <li>...</li>

   <li>...</li>

   ...

</ul>

</div>

<script type="text/javascript" src="better-scroll.js"></script>

<script type="text/javascript">

new BScroll(document.getElementById(‘wrapper‘));

</script>

</body>

二. 结合 vue 使用

  1. 安装 better-scroll

    npm install better-scroll

  2. 页面中引入 better-scroll

    import BScroll from ‘better-scroll‘

  3. 如果不支持 import，可使用

    var BScroll = require(‘better-scroll‘)

页面结构：

<div id="wrapper" ref="wrapper">

<ul class="container">

   <li>...</li>

   <li>...</li>

   ...

</ul>

</div>

注意：better-scroll 会将点击事件去掉，如果滚动部分需要有点击事件，需要在参数里加上 click：true。

同时，在 PC 上或某些手机端，由于未成功将 touchend 事件 move 掉，点击事件会执行两次。

better-scroll 派发的 event 事件和原生 js 的 event 有属性上的区别，其中有一个属性为 event._constructed。better-scroll 派发的事件中 event._constructed 为 true，原生点击事件中没有这个属性。

selectList(index,event){

if(!event._constructed){//如果不存在这个属性,则为原生点击事件，不执行下面的函数

    return

}

}

根据官方 API 的解释可知，一些需要在页面数据变化完成后才执行的函数需要写在 $nextTick 中 。

this.$nextTick(() => {

this._initScroll()

})

三. better-scroll 参数

  1. Options 参数

    1. startX: 0 开始的 X 轴位置
    2. startY: 0 开始的 Y 轴位置
    3. scrollY: true 滚动方向为 Y 轴
    4. scrollX: true 滚动方向为 X 轴
    5. click: true 是否派发 click 事件，通常判断浏览器派发的 click 还是 betterscroll 派发的 click，可以用 event._constructed，若是 bs 派发的则为 true
    6. directionLockThreshold: 5
    7. momentum: true 当快速滑动时是否开启滑动惯性
    8. bounce: true 是否启用回弹动画效果
    9. selectedIndex: 0 wheel 为 true 时有效，表示被选中的 wheel 索引
    10. rotate: 25 wheel 为 true 时有效，表示被选中的 wheel 每一层的旋转角度
    11. wheel: false 该属性是给 picker 组件使用的，普通的列表滚动不需要配置
    12. snap: false 该属性是给 slider 组件使用的，普通的列表滚动不需要配置
    13. snapLoop: false 是否可以无缝循环轮播
    14. snapThreshold: 0.1 用手指滑动时页面可切换的阈值，大于这个阈值可以滑动的下一页
    15. snapSpeed: 400, 轮播图切换的动画时间
    16. swipeTime: 2500 swipe 持续时间
    17. bounceTime: 700 弹力动画持续的毫秒数
    18. adjustTime: 400 wheel 为 true 有用，调整停留位置的时间
    19. swipeBounceTime: 1200 swipe 回弹 时间
    20. deceleration: 0.001 滚动动量减速越大越快，建议不大于 0.01
    21. momentumLimitTime: 300 符合惯性拖动的最大时间
    22. momentumLimitDistance: 15 符合惯性拖动的最小拖动距离
    23. resizePolling: 60 重新调整窗口大小时，重新计算 better-scroll 的时间间隔
    24. preventDefault: true 是否阻止默认事件

      preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ } 阻止默认事件
    25. HWCompositing: true 是否启用硬件加速
    26. useTransition: true 是否使用 CSS3 的 Transition 属性
    27. useTransform: true 是否使用 CSS3 的 Transform 属性
    28. probeType: 1 滚动的时候会派发 scroll 事件，会截流。2滚动的时候实时派发 scroll 事件，不会截流。 3除了实时派发 scroll 事件，在 swipe 的情况下仍然能实时派发 scroll 事件

  2. Events 事件

    1. beforeScrollStart - 滚动开始之前触发
    2. scrollStart - 滚动开始时触发
    3. scroll - 滚动时触发
    4. scrollCancel - 取消滚动时触发
    5. scrollEnd - 滚动结束时触发
    6. touchend - 手指移开屏幕时触发
    7. flick - 触发了 fastclick 时的回调函数
    8. refresh - 当 better-scroll 刷新时触发
    9. destroy - 销毁 better-scroll 实例时触发 
      let scroll = new BScroll(document.getElementById('wrapper'),{
      

    cilick: true,
    
probeType: 3

    })

    scroll.on('scroll', (pos) => {

    console.log(pos.x + '~' + pos.y)

    })

      ```

  3. 函数列表

    1. scrollTo(x, y, time, easing)

      滚动到某个位置，x,y 代表坐标，time 表示动画时间，easing 表示缓动函数

    2. scroll.scrollTo(0, 500)

      scrollToElement(el, time, offsetX, offsetY, easing)

      滚动到某个元素，el（必填）表示 dom 元素，time 表示动画时间，offsetX 和 offsetY 表示坐标偏移量，easing 表示缓动函数

    3. refresh()

      强制 scroll 重新计算，当 better-scroll 中的元素发生变化的时候调用此方法

    4. getCurrentPage()

      snap 为 true 时，获取滚动的当前页，返回的对象结构为 {x, y, pageX, pageY}，其中 x,y 代表滚动横向和纵向的位置；pageX，pageY 表示横向和纵向的页面索引。用法如：getCurrentPage().pageX

    5. goToPage(x, y, time, easing)

      snap 为 true，滚动到对应的页面，x 表示横向页面索引，y 表示纵向页面索引， time 表示动画，easing 表示缓动函数（可省略不写）

    6. enable() 启用 better-scroll，默认开启

    7. disable() 禁用 better-scroll

    8. destroy() 销毁 better-scroll，解绑事件

页面滚动插件 better-scroll 的用法的更多相关文章

  1. 左侧 随着页面滚动固定 fixed. scroll .scrollTop

    1.图片. 要求:随着页面滚动 . 左侧应该顶着 浏览器顶部, 向上回滚, 就恢复原状. 2. 代码: html <div class="all "> <!-- ...

  2. Scroll Depth – 衡量页面滚动的 Google 分析插件

    Scroll Depth 是一个小型的 Google Analytics(谷歌分析)插件,可以让你衡量用户在页面上滚动了多远.它可以监控 25%.50%.75% 和 100% 四个滚动点,并发送谷歌分 ...

  3. 页面滚动显示或隐藏元素Headroom.js插件帮助你实现滚动效果

    Headroom.js 是什么? Headroom.js 是一个轻量级.高性能的JS小工具(不依赖任何工具库!),它能在页面滚动时做出响应.此页面顶部的导航条就是一个鲜活的案例,当页面向下滚动时,导航 ...

  4. jquery 页面滚动到底部自动加载插件集合

    很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容.下面为你推荐 10 个 jQuery 的无限滚动的插件: 1. jQuery ScrollPa ...

  5. Infinite Scroll - jQuery & WP 无限滚动插件

    无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片.文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容.Infinite Scroll  这款  ...

  6. Page Scroll Effects - 简单的页面滚动效果

    Codyhouse 收集了一组页面滚动效果,就是目前大家很常见的用户在浏览网页的时候.一些效果虽然极端,但如果你的目标是创建一个身临其境的用户体验,他们是非常有用的.所有的动画都使用 Velocity ...

  7. jQuery页面滚动监听事件及高级效果插件

    jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scrol ...

  8. 20 个用于处理页面滚动效果的 jQuery 插件

    对设计和开发一个网站来说,web开发者不能低估了网站滚动效果的重要性.如今,设计者们都视为一大挑战了,在网站中设计出吸引眼球的高效视觉滚动效果.幸运的是有各种各样的jquery 滚动插件可供他们使用, ...

  9. [转]用 jQuery 实现页面滚动（Scroll）效果的完美方法

    转自: http://zww.me/archives/25144 很多博主都写过/转载过用 jQuery 实现页面滚动(Scroll)效果的方法,但目前搜来的方法大都在 Opera 下有个小 Bug: ...

随机推荐

  1. 反爬虫破解系列-汽车之家利用css样式替换文字破解方法

    网站: 汽车之家:http://club.autohome.com.cn/ 以论坛为例 反爬虫措施: 在论坛发布的贴子正文中随机抽取某几个字使用span标签代替,标签内容位空,但css样式显示为所代替 ...

  2. plsql高版本无法设置Fixedsys字体解决办法（win7&winXP适用）

    http://hi.baidu.com/crsky2008/item/c174c9fb52577919e3e3bd6b 设置如下:Tools->Preferences->Oracle-&g ...

  3. [leetcode] 21. Implement strStr()

    这个题目是典型的KMP算法,当然也可以试试BM,当然有关KMP和BM的介绍阮一峰曾经写过比较好的科普,然后july也有讲解,不过那个太长了. 先放题目吧: Implement strStr(). Re ...

  4. HTTP的瓶颈

    http协议,1.0或1.1版本,一个连接智能发送一个请求,通信都是基于请求/响应方式的,请求只能从客户端发起(半双工),发送冗长的首部. 在交互比较频繁的社交网站等,一直轮训带来的网络及服务器压力是 ...

  5. 窗口与导航-----Selenium快速入门（十三）

    前面所讲的,大部分是WebDriver这个接口以及相关的类的使用.而本文所讲的窗口与导航,也是里面的内容,而且非常简单,目测就能学会. 一.窗口,也就是window,这里的窗口是指浏览器窗口.他的方法 ...

  6. C#使用Linq对DataGridView进行模糊查找

    针对DataGridView中已进行过数据绑定,即已向DataGridView中添加了一些数据,可以结合Linq查询,并让匹配查询的行高亮显示,如下图:     具体实现如下:   [csharp] ...

  7. C#通过盘符获取剩余空间

    public static long GetHardDiskSpace(string str_HardDiskName) { ; str_HardDiskName = str_HardDiskName ...

  8. 从B站、爱奇艺、映客的IPO上市，看国内视频公司的内容审核现状

    本文由  网易云发布. 3月30日,中央电视台<经济半小时>栏目讲述了网络上的一个顽症——色情内容.在这期主题为<互联网上的“色诱”>的节目中,央视的记者揭示了色情直播的猖獗. ...

  9. CRUSH map 定制实例解析

    1.提取已有的CRUSH map ,使用-o参数,ceph将输出一个经过编译的CRUSH map 到您指定的文件ceph osd getcrushmap -o crushmap.txt 2.反编译你的 ...

  10. AndroidStudio的一些快捷键的使用

    1.返回上一次浏览快捷键的设置   https://blog.csdn.net/yingtian648/article/details/73277388 2.格式化代码的快捷键的设置      htt ...