vue使用better-scroll實現橫向滾動的方法例項

阿新 • • 發佈：2021-06-04

一、滾動的實現原理

better-scroll的滾動原理和瀏覽器原生滾動原理是一樣的，當子盒子的高度大於父盒子的高度，就會出現縱向滾動；同理，如果子盒子的寬度大於父盒子的寬度，那麼就會出現橫向滾動。

二、better-scroll的 html 結構

先來看一下 better-scroll 常見的 html 結構：

<div class="wrapper">
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
</div>

BetterScroll應用於外部wrapper容器，並且滾動部分是content。請注意，wrapper預設情況下，BetterScroll處理容器（）的第一個子元素（內容）的滾動，這意味著其他元素將被忽略。

三、在vue中使用better-scroll

npm install better-scroll --save  //npm 安裝
import BScroll from 'better-scroll'  //元件檔案中引入better-scroll

<template>
   /* 橫向滾動 */
   /* 這裡是父盒子*/
<div
        class="wrapper_box"
        style="min-height:100vh;
        "
        ref="wrapper"
        v-else
      >
      /* 這裡是子盒子，即滾動區域*/
        <div class="content" ref="wra 
程式設計客棧pperChild">
          <div
程式設計客棧            v-for="(item,index) in currentImgList"
            :key="index"
            class="imgItem"
          >
            <img :src="item.img" class="img" style="margin: 0 10px;" />
          </div>
        </div>
      </div>
</template>
<script>
 import BScroll from "better-scroll";
 export default {
  data() {
    return {
      currentImgList: [
        { img: require("../../assets/image/zzb_1.png") },{ img: require("../../assets/image/zzb_2.png") },{ img: require("../../assets/image/zzb_3.png") }
      ],};
  },mounted() {
    this.slide_x(); //橫向滾動
  },methods: {
     // 初始化
    _initScroll() {
      if (!this.scroll) {
        this.scroll = new BScrwww.cppcns.com 
oll(this.$refs.wrapper,{ // 例項化BScroll接受兩個引數，第一個為父盒子的dom節點
          startX: 0,/// 配置的詳細資訊請參考better-scroll的官方文件，這裡不再贅述
          click: true,scrollX: true,scrollY: false,// 忽略豎直方向的滾動
          eventPassthrough: "vertical",useTransition: false // 防止快速滑動觸發的異常回彈
        });
      } else {
        this.scroll.refresh(); //如果dom結構發生改變呼叫該方法重新計算來確保滾動效果的正常
      }
    },// 計算寬度
    _calculateWidth() {
      // 獲取類名為 imgItem 的標籤
      let rampageList = this.$refs.wrapperChild.getElementsByClassName(
        "imgItem"
      );
      // 設定一個起始寬度
      let initWidth = 0;
      // 遍歷標籤
      fohttp://www.cppcns.comr (let i = 0; i < rampageList.length; i++) {
        const item = rampageList[i];
        // 將每一個標籤寬度相加
        initWidth += item.clientWidth;
      }
      // 設定可滾動的寬度
      this.$refs.wrapperChild.style.width = `${initWidth}px`;
    },slide_x() {
      this.$nextTick(() => { //this.$nextTick 是一個非同步函式，為了確保 DOM 已經渲染完畢
www.cppcns.com        this._initScroll(); // 初始化
        this._calculateWidth(); // 計算寬度
      });
    },},};
</script>

下面是外掛原作者說的：

vue使用better-scroll實現橫向滾動的方法例項