快捷導(dǎo)航

vue使用better-scroll實(shí)現(xiàn)橫向滾動(dòng)的方法實(shí)例

更新時(shí)間：2021年06月02日 11:55:48 作者：鐵錘妹妹@

這幾天研究項(xiàng)目時(shí),看到了 better-scroll 插件,看著感覺(jué)功能挺強(qiáng),這篇文章主要給大家介紹了關(guān)于vue使用better-scroll實(shí)現(xiàn)橫向滾動(dòng)的相關(guān)資料,需要的朋友可以參考下

一、滾動(dòng)的實(shí)現(xiàn)原理

better-scroll的滾動(dòng)原理和瀏覽器原生滾動(dòng)原理是一樣的，當(dāng)子盒子的高度大于父盒子的高度，就會(huì)出現(xiàn)縱向滾動(dòng)；同理，如果子盒子的寬度大于父盒子的寬度，那么就會(huì)出現(xiàn)橫向滾動(dòng)。

二、better-scroll的 html 結(jié)構(gòu)

先來(lái)看一下 better-scroll 常見(jiàn)的 html 結(jié)構(gòu)：

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

BetterScroll應(yīng)用于外部wrapper容器，并且滾動(dòng)部分是content。請(qǐng)注意，wrapper默認(rèn)情況下，BetterScroll處理容器（）的第一個(gè)子元素（內(nèi)容）的滾動(dòng)，這意味著其他元素將被忽略。

三、在Vue中使用better-scroll

npm install better-scroll --save  //npm 安裝
import BScroll from 'better-scroll'  //組件文件中引入better-scroll

<template>
   /* 橫向滾動(dòng) */
   /* 這里是父盒子*/
<div
        class="wrapper_box"
        style="min-height:100vh;
        "
        ref="wrapper"
        v-else
      >
      /* 這里是子盒子，即滾動(dòng)區(qū)域*/
        <div class="content" ref="wrapperChild">
          <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(); //橫向滾動(dòng)
  },
  methods: {
     // 初始化
    _initScroll() {
      if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.wrapper, { // 實(shí)例化BScroll接受兩個(gè)參數(shù)，第一個(gè)為父盒子的dom節(jié)點(diǎn)
          startX: 0, /// 配置的詳細(xì)信息請(qǐng)參考better-scroll的官方文檔，這里不再贅述
          click: true,
          scrollX: true,
          scrollY: false, // 忽略豎直方向的滾動(dòng)
          eventPassthrough: "vertical",
          useTransition: false // 防止快速滑動(dòng)觸發(fā)的異?；貜?
        });
      } else {
        this.scroll.refresh(); //如果dom結(jié)構(gòu)發(fā)生改變調(diào)用該方法重新計(jì)算來(lái)確保滾動(dòng)效果的正常
      }
    },
    // 計(jì)算寬度
    _calculateWidth() {
      // 獲取類(lèi)名為 imgItem 的標(biāo)簽
      let rampageList = this.$refs.wrapperChild.getElementsByClassName(
        "imgItem"
      );
      // 設(shè)置一個(gè)起始寬度
      let initWidth = 0;
      // 遍歷標(biāo)簽
      for (let i = 0; i < rampageList.length; i++) {
        const item = rampageList[i];
        // 將每一個(gè)標(biāo)簽寬度相加
        initWidth += item.clientWidth;
      }
      // 設(shè)置可滾動(dòng)的寬度
      this.$refs.wrapperChild.style.width = `${initWidth}px`;
    },
    slide_x() {
      this.$nextTick(() => { //this.$nextTick 是一個(gè)異步函數(shù)，為了確保 DOM 已經(jīng)渲染完畢
        this._initScroll(); // 初始化
        this._calculateWidth(); // 計(jì)算寬度
      });
    },
    },
   

};
</script>

下面是插件原作者說(shuō)的：

四. 容易出現(xiàn)問(wèn)題的點(diǎn)：

必須等到頁(yè)面DOM渲染完成再去執(zhí)行BScroll的實(shí)例化，建議在mounted 鉤子函數(shù)里執(zhí)行
子盒子的寬度大于父盒子的寬度

最后

better-scroll插件作者的文章，發(fā)現(xiàn)better-scroll真強(qiáng)大?。?/p>

當(dāng) better-scroll 遇見(jiàn) Vue

在Vue中用better-scroll實(shí)現(xiàn)橫向滾動(dòng)

到此這篇關(guān)于vue使用better-scroll實(shí)現(xiàn)橫向滾動(dòng)的文章就介紹到這了,更多相關(guān)vue better-scroll實(shí)現(xiàn)橫向滾動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: