vue better-scroll的捲動插件使用詳解

這次帶給大家vue better-scroll的滾動插件使用詳解，使用vue better-scroll的滾動插件的注意事項有哪些，下面就是實戰案例，一起來看一下。

# BetterScroll號稱目前最好用的行動端滾動插件，因此它的強大之處肯定是存在的。要不...哈哈。個人感覺還是很好用的。這篇文章不是籠統的講 BetterScroll ，而是單講滾動，想要深入了解它，請移步這裡 。

滾動原理

better-scroll 是什麼捲動原理

better-scroll 是一款專注於解決行動裝置（已支援 PC）各種捲動場景需求的外掛程式。它的核心是藉鑒的 iscroll 的實現，它的 API 設計基本上兼容 iscroll，在 iscroll 的基礎上又擴展了一些 feature 以及做了一些性能優化。

better-scroll 是基於原生 JS 實作的，不依賴任何框架。它編譯後的程式碼大小是 63kb，壓縮後是 35kb，gzip 後僅有 9kb，是一款非常輕量的 JS lib。

綠色部分為 wrapper，也就是父容器，它會有固定的高度。黃色部分為 content，它是父容器的第一個子元素，它的高度會隨著內容的大小而撐高。那麼，當 content 的高度不超過父容器的高度，是不能滾動的，而它一旦超過了父容器的高度，我們就可以滾動內容區了。橫向滾動的原理一致就是將固定高度改為固定寬度。 （這裡就不囉嗦了）

# 縱向捲動

# 廢話不多說，我們直接上程式碼。

<template>
 <p>
   </p>
<ul>
    <li>{{item}}</li>
   </ul>
 
</template>
<script>
 import BScroll from &#39;better-scroll&#39;;
  export default {
   mounted() {
    this.$nextTick(() => {
     this.scroll = new BScroll(this.$refs.wrapper);
    });
   }
  };
</script>
<style>
 .wrapper{
  overflow:hidden;
  height:100vh;
 }
 ul li{
  height:400px;
 }
</style>

這是一個Vue BetterScroll縱向滾動demo,這裡要注意的有兩點。

1. 只能有一層父級p，也就是容器

2. 父級p要設定溢出隱藏，並且固定高度

##

橫向捲動

橫向滾動，相較於縱向滾動需要動態的去獲取滾動區的寬度，直接上碼。

<template>
 <p>
  </p>
<ul>
   <li>
     {{item.title}}
   </li>
  </ul>
 
 </template>
 <script>
 import BScroll from &#39;better-scroll&#39;;
  export default {
   data() {
    return{
     itemList:[
     {
      &#39;title&#39;:&#39;关注&#39;
     },
     {
      &#39;title&#39;:&#39;推荐&#39;
     },
     {
      &#39;title&#39;:&#39;深圳&#39;
     },
     {
      &#39;title&#39;:&#39;视频&#39;
     },
     {
      &#39;title&#39;:&#39;音乐&#39;
     },
     {
      &#39;title&#39;:&#39;热点&#39;
     },
     {
      &#39;title&#39;:&#39;新时代&#39;
     },
     {
      &#39;title&#39;:&#39;娱乐&#39;
     },
     {
      &#39;title&#39;:&#39;头条号&#39;
     },
     {
      &#39;title&#39;:&#39;问答&#39;
     },
     {
      &#39;title&#39;:&#39;图片&#39;
     },
     {
      &#39;title&#39;:&#39;科技&#39;
     },
     {
      &#39;title&#39;:&#39;体育&#39;
     },
     {
      &#39;title&#39;:&#39;财经&#39;
     },
     {
      &#39;title&#39;:&#39;军事&#39;
     },
     {
      &#39;title&#39;:&#39;国际&#39;
     }
     ]
    }
   },
   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+&#39;px&#39;
     this.$nextTick(()=>{
       if (!this.scroll) {
        this.scroll=new BScroll(this.$refs.tab, {
         startX:0,
         click:true,
         scrollX:true,
         scrollY:false,
         eventPassthrough:&#39;vertical&#39;
        });
       }else{
        this.scroll.refresh()
       }
     });
    }
   }
  };
 </script>
 <style>
 .tab{
  width: 100vw;
  overflow: hidden;
  padding:5px;
  .tab_content{
   line-height: 2rem;
   display: flex;
   .tab_item{
    flex: 0 0 60px;
    width:60px;
   } 
  }
 } 
 </style>

橫向捲動需要注意。

1. 只能有一層父級p，也就是容器

父容器要設定溢位隱藏並固定寬度
動態取得捲動區的寬度

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

vue中的全選與反選

使用mint-ui時間外掛程式時怎麼取得選擇值

#

以上是vue better-scroll的捲動插件使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！