正文

页面滚动插件 better-scroll 的用法

譬如朝露 V管理员/ / 0 评论/ 2348阅读
03 07

正文

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

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

中文API地址：https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/property.html

一. 立即使用

<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 实例时触发
      ``` javascript
      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封装组件代码实例：

<template>
    <div class="wrapper" ref='wrapper'>
        <slot></slot>
    </div>
</template>

<script>
import Bscroll from 'better-scroll' ;
export default{
    name:'scroll',
    props:{
        proType:{
            type:Number,
            default:1
        },
        click:{
            type:Boolean,
            default:true
        },
        datas:{
            type:Array,
            default:null
        },
        listenScroll:{
            type:Boolean,
            default:false
        }
    },
    mounted(){
    
        var that=this;
        setTimeout(function(){
            
            that._initScroll();
            
        },100)
    },
    
    methods:{
        _initScroll(){
            var that=this;
            if(!this.$refs.wrapper){
                return
            }
            
            this.scroll=new Bscroll(this.$refs.wrapper,{
                probeType:this.proType,
                click:this.click
            })
            
            if(this.listenScroll){
                
                this.scroll.on('scroll',(pos)=>{
                    
                    that.$emit('scroll',pos);
                })
            }
        },
        enable(){
            this.scroll && this.scroll.enable();
        },
        disable(){
            this.scroll && this.scroll.disable();
        },
        refresh(){
            this.scroll && this.scroll.refresh();
        },
        scrollTo(){
            this.scroll && this.scroll.scrollTo.apply(this.scroll,arguments);
        },
        scrollToElement(){
        
            this.scroll && this.scroll.scrollToElement.apply(this.scroll,arguments);
        },
    },
    wacth:{
        datas(){
            console.log(1)
            var that=this;
            setTimeout(function(){
                that.scroll && this.refresh();
            },20)
        }
    }
}
</script>

<style scoped lang="less">
    
</style>


文章版权声明：除非注明，否则均为 譬如朝露_策温技术开发工作室博客原创文章，转载或复制请以超链接形式并注明出处。