Vue は better-scroll を使用して水平スクロール方法の例を実現します

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

npm install better-scroll --save //npm install import BScroll from 'better-scroll' //コンポーネントファイルにbetter-scrollを導入する

<テンプレート>
   /* 水平スクロール */
   /* これは親ボックスです */
<div
        クラス="wrapper_box"
        スタイル="min-height:100vh;
        「
        ref="ラッパー"
        v-else
      >
      /* これはサブボックス、スクロール領域です*/
        <div class="content" ref="wrapperChild">
          <div
            v-for="(item, index) in currentImgList"
            :key="インデックス"
            クラス="imgItem"
          >
            <img :src="item.img" class="img" style="margin: 0 10px;" />
          </div>
        </div>
      </div>
</テンプレート>
<スクリプト>
 「better-scroll」からBScrollをインポートします。
 エクスポートデフォルト{
  データ（） {
    戻る {
      現在の画像リスト: [
        { 画像: require("../../assets/image/zzb_1.png") },
        { 画像: require("../../assets/image/zzb_2.png") },
        { 画像: require("../../assets/image/zzb_3.png") }
      ]、
    };
  },
  マウント() {
    this.slide_x(); //水平スクロール},
  メソッド: {
     // 初期化_initScroll() {
      スクロールすると
        this.scroll = new BScroll(this.$refs.wrapper, { // BScrollをインスタンス化し、2つのパラメータを受け入れます。最初のパラメータは親ボックスのDOMノードです。startX: 0, /// 詳細な設定情報については、better-scrollの公式ドキュメントを参照してください。ここでは繰り返しません。click: true,
          スクロールX: true、
          scrollY: false, // 垂直スクロールを無視するeventPassthrough: "vertical",
          useTransition: false // 高速スライドによって引き起こされる異常なリバウンドを防ぐ});
      } それ以外 {
        this.scroll.refresh(); //DOM 構造が変更された場合は、このメソッドを呼び出して再計算し、通常のスクロール効果を確保します}
    },
    // 幅を計算する_calculateWidth() {
      // クラス名imgItemのタグを取得します。letrampageList = this.$refs.wrapperChild.getElementsByClassName(
        「画像アイテム」
      );
      // 開始幅を設定します。let initWidth = 0;
      // ラベルをトラバースする for (let i = 0; i < rampageList.length; i++) {
        定数項目 = 暴走リスト[i];
        // 各ラベルの幅を追加します initWidth += item.clientWidth;
      }
      // スクロール可能な幅を設定します。this.$refs.wrapperChild.style.width = `${initWidth}px`;
    },
    スライドx() {
      this.$nextTick(() => { //this.$nextTick は、DOM がレンダリングされたことを確認するための非同期関数です。 this._initScroll(); // 初期化 this._calculateWidth(); // 幅を計算 });
    },
    },
   

};
</スクリプト>