快捷導(dǎo)航

Vue中利用better-scroll組件實現(xiàn)橫向滾動功能

更新時間：2021年06月02日 11:55:27 作者：前端艾希

橫向滾動這個功能是我們?nèi)粘ｉ_發(fā)中經(jīng)常會遇到的一個需求,下面這篇文章主要給大家介紹了關(guān)于Vue中如何利用better-scroll組件實現(xiàn)橫向滾動的相關(guān)資料,需要的朋友可以參考下

About

最近在學(xué)習(xí)vue的過程中，仿照去哪兒網(wǎng)的移動端寫了個小項目，旨在實踐和鞏固基礎(chǔ)知識，但是今天發(fā)現(xiàn)去哪兒的首頁上有一個組件用戶體驗較差，即一個橫向列表使用瀏覽器的原生滾動實現(xiàn)，列表滾動起來較為生澀，很難受，于是乎決定由better-scroll重寫這個組件。

better-scroll介紹

better-scroll是黃軼大神（沒錯，我學(xué)長）寫的基于i-scroll的一個滾動組件，項目地址：https://github.com/ustbhuangyi/better-scroll

一、滾動的實現(xiàn)原理

better-scroll的滾動原理和瀏覽器原生滾動原理是一樣的，當(dāng)子盒子的高度大于父盒子的高度，就會出現(xiàn)縱向滾動：

同理，如果子盒子的寬度大于父盒子的寬度，那么就會出現(xiàn)橫向滾動 ( 根本原理 )。

二、在Vue中使用better-scroll

在Vue中使用better-scroll最需要注意的點就是必須等到頁面渲染完成再去執(zhí)行BScroll的實例化，因為better-scroll必須要得到滾動區(qū)域的尺寸和父盒子的尺寸，來計算出是否能滾動，所以我們必須要對Vue的生命周期有一定的了解。

這里是一個小demo，通過這個demo你將會了解到如何使用better-scroll

<template>
  <div class="wrapper" ref="wrapper"> // 在vue中獲取dom元素最簡便的方法就是利用 this.$refs
    <ul class="content">
      <li>...</li>
      <li>...</li>
      ...
    </ul>
  </div>
</template>
<script>
  import BScroll from 'better-scroll' //導(dǎo)入better-scroll
  export default {
    mounted() {
      this.$nextTick(() => { // 使用 this.$nextTick 為了確保組件已經(jīng)渲染完畢
        this.scroll = new Bscroll(this.$refs.wrapper, {}) // 實例化BScroll接受兩個參數(shù)，第一個為父盒子的dom節(jié)點
      })
    }
  }
</script>

三、在Vue中實現(xiàn)橫向滾動

1. 效果圖對比

使用原生滾動：

使用better-scroll:

2. 代碼（請看注釋）

<template>
  <div class="recommand-wrap">
    <div class="title">
      <img class="title-img" src="https://imgs.qunarzz.com/piao/fusion/1711/16/bfbb9874e8f11402.png" alt="本周熱門榜單">
      <span class="title-hotrec">本周熱門榜單</span>
      <span class="title-allrec">全部榜單</span>
    </div>
    <div ref="wrapper">  /* 這里是父盒子*/
      <ul class="cont" ref="cont">  /* 這里是子盒子，即滾動區(qū)域*/
        <li class="cont-item" v-for="item of recommendList" :key="item.id">
          <div class="cont-img">
            <img class="img" :src="item.url" :alt="item.text">
          </div>
          <div class="cont-dest">{{item.text}}</div>
          <div class="cont-price">
            <span class="price">￥{{item.price}}</span>
            <span>起</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'

export default {
  name: 'HomeRecommand',
  props: {
    recommendList: {
      type: Array,
      required: true
    }
  },
  components: {

  },
  data () {
    return {

    }
  },
  methods: {
    verScroll () {
      let width = this.recommendList.length * 110// 動態(tài)計算出滾動區(qū)域的大小，前面已經(jīng)說過了，產(chǎn)生滾動的原因是滾動區(qū)域?qū)挾却笥诟负凶訉挾?
      this.$refs.cont.style.width = width + 'px'  // 修改滾動區(qū)域的寬度
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.wrapper, {
            startX: 0,  // 配置的詳細(xì)信息請參考better-scroll的官方文檔，這里不再贅述
            click: true,
            scrollX: true,
            scrollY: false,
            eventPassthrough: 'vertical'
          })
        } else {
          this.scroll.refresh() //如果dom結(jié)構(gòu)發(fā)生改變調(diào)用該方法
        }
      })
    }
  },
  mounted () {
    this.$nextTick(() => {
      let timer = setTimeout(() => { // 其實我也不想寫這個定時器的，這相當(dāng)于又嵌套了一層$nextTick，但是不這么寫會失敗
        if (timer) {
          clearTimeout(timer)
          this.verScroll()
        }
      }, 0)
    })
  }
}
</script>

<style lang="scss" scoped>
  .recommand-wrap {
    height: 0;
    padding-bottom: 50%;
    margin-top: .2rem;
    background: #fff;
    padding-left: .24rem;
    width: 100%;
    .title {
      position: relative;
      height: 40px;
      display: flex;
      padding: 12px 0;
      box-sizing: border-box;
      .title-img {
        width: 15px;
        height: 15px;
      }
      .title-hotrec {
        font-size: 16px;
        margin-left: 4px;
      }
      .title-allrec {
        position: absolute;
        padding-top: 2px;
        font-size: 13px;
        right: 20px;
        color: gray;
      }
    }
    .cont {
      list-style: none;
      // overflow-x: scroll;  
      white-space: nowrap;
      font-size: 12px;
      text-align: center;
      padding-right: .24rem;
      .cont-item {
        position: relative;
        display: inline-block;
        padding: .06rem 0 .2rem;
        width: 2rem;
        margin: 0 .1rem;
        .cont-img {
          overflow: hidden;
          width: 2rem;
          height: 0;
          padding-bottom: 100%;
          .img {
            width: 100%;
          }
        }
        .cont-dest {
          margin: .1rem 0;
        }
        .cont-price {
          .price {
            color: #ff8300;
          }
        }
      }
    }
  }
</style>

參考鏈接

作者：黃軼

鏈接：https://zhuanlan.zhihu.com/p/27407024