better-scroll 移动端滚动插件

better-scroll 插件

1.介绍：better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。better-scroll 是基于原生 JS 实现的，不依赖任何框架

// 安装

npm install better-scroll --save

// 文档地址


https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/


// 在组件中引入使用


<template>

<!-- better-scroll插件控制的父元素 -->

<div class="wrapper">
    
    <!-- 子元素超出父元素的宽和高开始滚动 -->

    <ul class="content">
        <li>li1</li>
        <li>li2</li>
     </ul>

</div>

</template>


<script>

import BScroll from 'better-scroll'

export default {

    data () {

        return {

            scroll: null
        }
    },

    mounted () {

        if (!this.scroll) {
            
            // 创建 better-scroll 一个实例对象
            this.scroll = new BScroll('.wrapper', {

                // 开启横向滚动
                crollX: true,

                // 初始化开始的横向坐标
                startX: 0,

                // 纵轴和横轴都开启之后，freeScroll为true方向可以随意变动
                freeScroll: true,

                // 纵轴方向保持不变
                // eventPassthrough: 'vertical' 纵向不变，'horizontal'横向

                // 自定义点击事件
                tap: 'tabEvent',

                // 设置了该属性滚动事件才会起效果
                probeType: 3,
             })
        } else {

            // 重新计算 better-scroll，当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常
              this.scroll.refresh()
        }
        
        // 监听自定义事件
        window.addEventListener('tabEvent', () => {
          console.log('点击')
        })

        // 监听better-scroll实例上的事件
        
        // 其他事件可以参考文档
        this.scroll.on('scrollEnd', pops => {
          console.log('执行')
        })
    }
}
</script>


<style scoped lang="less">


 .wrapper {
     500px;
    height: 500px;
    .content {
       1000px;
      height: 1000px;
      li {
         500px;
        height: 500px;
        display: flex;
      }
    }
  }
</style>