vue better-scrollを使用して横スクロールを実現する方法の例

一、転がりの実現原理
better-scrollのスクロール原理はブラウザの元々のスクロール原理と同じで、子供の箱の高さは親の箱の高さより大きくて、縦スクロールが現れます。同じように、子の箱の幅が親の箱の幅より大きいと、横スクロールが発生します。
二、better-scrollのhtml構造
まず、better-scrollでよく見られるhtml構造を見てみます。

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

BetterScrrollは外部wrapper容器に適用され、スクロール部分はcontentである。wrapperデフォルトでは、BetterScrroll処理容器（）の最初のサブ要素（内容）のスクロールは、他の要素が無視されることを意味します。
三、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="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(); //    
  },
  methods: {
     //    
    _initScroll() {
      if (!this.scroll) {
        this.scroll = new BScroll(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;
      //     
      for (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       
        this._initScroll(); //    
        this._calculateWidth(); //     
      });
    },
    },
   

};
</script>

以下はプラグインの元の作者が言ったのです。

四.問題が起こりやすい点：

ページDOMレンダリングが完了したら、BScrollの実装を実行しなければならない。mountedフック関数で

を実行することを提案する。

サブケースの幅は親ケースの幅より大きいです。

最後に
better-scrollプラグインの作者の文章、better-scrollが本当に強いことを発見します！
better-scrollがVueに出会う時
Vueではbetter-scrollで横スクロールを実現します。
ここで、vueについてbetter-scrollを使って横スクロールを実現する文章を紹介します。これに関連して、Vue better-scrollが横スクロールを実現します。以前の文章を検索してください。または次の関連記事を引き続きご覧ください。これからもよろしくお願いします。