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 {
    width: 500px;
    height: 500px;
    .content {
      width: 1000px;
      height: 1000px;
      li {
        width: 500px;
        height: 500px;
        display: flex;
      }
    }
  }
</style>