Vue の better-scroll コンポーネントを使用して水平スクロール機能を実現する

<テンプレート>
  <div class="wrapper" ref="wrapper"> // Vue で DOM 要素を取得する最も簡単な方法は、this.$refs を使用することです。
    <ul class="content">
      <li>...</li>
      <li>...</li>
      ...
    </ul>
  </div>
</テンプレート>
<スクリプト>
  import BScroll from 'better-scroll' //better-scrollをインポート
  エクスポートデフォルト{
    マウント() {
      this.$nextTick(() => { // this.$nextTick を使用して、コンポーネントがレンダリングされていることを確認します this.scroll = new Bscroll(this.$refs.wrapper, {}) // BScroll をインスタンス化し、2 つのパラメータを受け入れます。最初のパラメータは親ボックスの DOM ノードです})
    }
  }
</スクリプト>

<テンプレート>
  <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"> /* これは子ボックス、スクロール領域です*/
        <li class="cont-item" v-for="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>
</テンプレート>

<スクリプト>
'better-scroll' から BScroll をインポートします

エクスポートデフォルト{
  名前: 'HomeRecommand',
  小道具: {
    推奨リスト: {
      タイプ: 配列、
      必須: true
    }
  },
  コンポーネント:

  },
  データ （） {
    戻る {

    }
  },
  メソッド: {
    verScroll() {
      let width = this.recommendList.length * 110 // スクロール領域のサイズを動的に計算します。前述のように、スクロールする理由は、スクロール領域の幅が親ボックスの幅よりも大きいためです。this.$refs.cont.style.width = width + 'px' // スクロール領域の幅を変更します。this.$nextTick(() => {
        スクロールすると
          this.scroll = 新しいBScroll(this.$refs.wrapper, {
            startX: 0, // 設定の詳細については、better-scroll の公式ドキュメントを参照してください。ここでは詳細には触れません。click: true,
            スクロールX: true、
            スクロールY: false、
            イベントパススルー: '垂直'
          })
        } そうでなければ{
          this.scroll.refresh() //DOM構造が変更された場合にこのメソッドを呼び出します}
      })
    }
  },
  マウントされた（）{
    this.$nextTick(() => {
      let timer = setTimeout(() => { // 実際には、このタイマーも書きたくありません。これは、$nextTick の別のレイヤーをネストするのと同じですが、if (timer) { の場合は失敗します。
          タイムアウトをクリア(タイマー)
          this.verScroll()
        }
      }, 0)
    })
  }
}
</スクリプト>

<style lang="scss" スコープ>
  .recommand-wrap {
    高さ: 0;
    パディング下部: 50%;
    上マージン: .2rem;
    背景: #fff;
    左パディング: .24rem;
    幅: 100%;
    。タイトル {
      位置: 相対的;
      高さ: 40px;
      ディスプレイ: フレックス;
      パディング: 12px 0;
      ボックスのサイズ: 境界線ボックス;
      .title-img {
        幅: 15px;
        高さ: 15px;
      }
      .title-hotrec {
        フォントサイズ: 16px;
        左マージン: 4px;
      }
      .title-allrec {
        位置: 絶対;
        パディング上部: 2px;
        フォントサイズ: 13px;
        右: 20px;
        色: グレー;
      }
    }
    .続き{
      リストスタイル: なし;
      // オーバーフローx: スクロール;  
      空白: ラップなし;
      フォントサイズ: 12px;
      テキスト配置: 中央;
      右パディング: .24rem;
      .cont-item {
        位置: 相対的;
        表示: インラインブロック;
        パディング: .06rem 0 .2rem;
        幅: 2rem;
        マージン: 0.1rem;
        .cont-img {
          オーバーフロー: 非表示;
          幅: 2rem;
          高さ: 0;
          パディング下部: 100%;
          .img {
            幅: 100%;
          }
        }
        .cont-dest {
          マージン: .1rem 0;
        }
        .cont-price {
          。価格 {
            色: #ff8300;
          }
        }
      }
    }
  }
</スタイル>