溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

詳解 vue better-scroll滾動插件排坑

發(fā)布時間：2020-10-23 12:14:05 來源：腳本之家 閱讀：338 作者：zhanzhan_wu 欄目：web開發(fā)

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

滾動原理

詳解 vue better-scroll滾動插件排坑

better-scroll 是什么滾動原理

better-scroll 是一款重點解決移動端（已支持 PC）各種滾動場景需求的插件。它的核心是借鑒的 iscroll 的實現(xiàn)，它的 API 設(shè)計基本兼容 iscroll，在 iscroll 的基礎(chǔ)上又?jǐn)U展了一些 feature 以及做了一些性能優(yōu)化。

better-scroll 是基于原生 JS 實現(xiàn)的，不依賴任何框架。它編譯后的代碼大小是 63kb，壓縮后是 35kb，gzip 后僅有 9kb，是一款非常輕量的 JS lib。

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

縱向滾動

廢話不多說，我們直接上代碼。

<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>

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

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

橫向滾動

橫向滾動，相比縱向滾動需要動態(tài)的去獲取滾動區(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':'音樂'
     },
     {
      'title':'熱點'
     },
     {
      'title':'新時代'
     },
     {
      'title':'娛樂'
     },
     {
      'title':'頭條號'
     },
     {
      'title':'問答'
     },
     {
      'title':'圖片'
     },
     {
      'title':'科技'
     },
     {
      'title':'體育'
     },
     {
      'title':'財經(jīng)'
     },
     {
      'title':'軍事'
     },
     {
      'title':'國際'
     }
     ]
    }
   },
   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+'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>

橫向滾動需要注意。

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

因為最近項目需要，所以從網(wǎng)上查閱了許多資料也無法解決我的問題。 BetterScroll 官網(wǎng)也沒有提供實際demo參考，所以就利用休息時間，寫了這篇文章。希望能對你們有用。需要具體 demo 請移步，別忘了給個star啊，寫文章不容易，給個贊唄！

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手