BetterScroll號(hào)稱目前最好用的移動(dòng)端滾動(dòng)插件，因此它的強(qiáng)大之處肯定是存在的。要不...哈哈。個(gè)人感覺(jué)還是很好用的。這篇文章不是籠統(tǒng)的講BetterScroll，而是單講滾動(dòng)，想要深入了解它，請(qǐng)移步或者這里。

• 滾動(dòng)原理

結(jié)構(gòu)圖

綠色部分為 wrapper，也就是父容器，它會(huì)有固定的高度。黃色部分為 content，它是父容器的第一個(gè)子元素，它的高度會(huì)隨著內(nèi)容的大小而撐高。那么，當(dāng) content 的高度不超過(guò)父容器的高度，是不能滾動(dòng)的，而它一旦超過(guò)了父容器的高度，我們就可以滾動(dòng)內(nèi)容區(qū)了。橫向滾動(dòng)的原理一致就是將固定高度改為固定寬度。（這里就不啰嗦了）

• 縱向滾動(dòng)

  廢話不多說(shuō)，我們直接上代碼。

  <template>
    <div class="wrapper" ref="wrapper">
        <ul>
          <li v-for="item in 8">{{item}}</li>
        </ul>
    </div>
  </template>
  <script>
    import BScroll from 'better-scroll';
      export default {
        mounted() {
          this.$nextTick(() => {
            this.scroll = new BScroll(this.$refs.wrapper);
          });
        }
      };
  </script>
  <style type="text/css">
    .wrapper{
      overflow:hidden;
      height:100vh;
    }
    ul li{
      height:400px;
    }
  </style>
  

  這是一個(gè)Vue BetterScroll縱向滾動(dòng)demo,這里需要注意的有兩點(diǎn)。

  • 只能有一層父級(jí)div，也就是容器
  • 父級(jí)div要設(shè)置溢出隱藏，并且固定高度

• 橫向滾動(dòng)

  橫向滾動(dòng)，相比縱向滾動(dòng)需要?jiǎng)討B(tài)的去獲取滾動(dòng)區(qū)的寬度，直接上代碼。

  <template>
    <div class="tab" ref="tab">
      <ul class="tab_content" ref="tabWrapper">
        <li class="tab_item" v-for="item in itemList" ref="tabitem">
            {{item.title}}
        </li>
      </ul>
    </div>
    </template>
    <script>
    import BScroll from 'better-scroll';
      export default {
        data() {
          return{
            itemList:[
            {
              'title':'關(guān)注'
            },
            {
              'title':'推薦'
            },
            {
              'title':'深圳'
            },
            {
              'title':'視頻'
            },
            {
              'title':'音樂(lè)'
            },
            {
              'title':'熱點(diǎn)'
            },
            {
              'title':'新時(shí)代'
            },
            {
              'title':'娛樂(lè)'
            },
            {
              'title':'頭條號(hào)'
            },
            {
              'title':'問(wèn)答'
            },
            {
              'title':'圖片'
            },
            {
              'title':'科技'
            },
            {
              'title':'體育'
            },
            {
              'title':'財(cái)經(jīng)'
            },
            {
              'title':'軍事'
            },
            {
              'title':'國(guó)際'
            }
            ]
          }
        },
        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() 返回元素的大小及其相對(duì)于視口的位置
            }
            this.$refs.tabWrapper.style.width=width+'px'
            this.$nextTick(()=>{
                if (!this.scroll) {
                  this.scroll=new BScroll(this.$refs.tab, {
                    startX:0,
                    click:true,
                    scrollX:true,
                    scrollY:false,
                    eventPassthrough:'vertical'
                  });
                }else{
                  this.scroll.refresh()
                }
            });
          }
        }
      };
    </script>
    <style lang="scss" scoped>
    .tab{
      width: 100vw;
      overflow: hidden;
      padding:5px;
      .tab_content{
        line-height: 2rem;
        display: flex;
        .tab_item{
          flex: 0 0 60px;
          width:60px;
        }  
      }
    }  
    </style>
  

  橫向滾動(dòng)需要注意。

  • 只能有一層父級(jí)div，也就是容器
  • 父容器要設(shè)置溢出隱藏并固定寬度
  • 動(dòng)態(tài)獲取滾動(dòng)區(qū)的寬度

因?yàn)樽罱?xiàng)目需要，所以從網(wǎng)上查閱了許多資料也無(wú)法解決我的問(wèn)題。BetterScroll官網(wǎng)也沒(méi)有提供實(shí)際demo參考，所以就利用休息時(shí)間，寫了這篇文章。希望能對(duì)你們有用。需要具體demo請(qǐng)移步，別忘了給個(gè)star啊，寫文章不容易，給個(gè)贊唄！

tips:上文的代碼可以直接使用，小伙伴們安裝完依賴后可以直接copy測(cè)試哦~