Vueではbetter-scrollコンポーネントを利用して横スクロール機能を実現します。

About
最近vueを勉強しているうちに、どこに行くかのネットのモバイル端末を真似して、基礎知識を実践して固めることを目指しましたが、今日はどこのトップページにコンポーネントがありますか？そして、better-scrollによってこのコンポーネントを書き換えることにしました。
better-scroll紹介
better-scrollは黄逸大神（間違いなく、私の先輩）が書いたi-scrollベースのスクロール組立品で、プロジェクトの住所：https://github.com/ustbhuangyi/better-scroll
一、転がりの実現原理
better-scrollのスクロール原理はブラウザの元々のスクロール原理と同じです。子供の箱の高さは親の箱の高さより大きく、縦スクロールが現れます。

同じように、子の箱の幅が親の箱の幅より大きいと、横スクロールが発生します。
二、Vueでbetter-scrollを使う
Vueの中でbetter-scrollを使うには一番注意しなければならない点はページのレンダリングが終わってからBScrollの実用化を実行しなければならないことです。better-scrollはスクロールエリアのサイズと親箱のサイズを得て、スクロールできるかどうかを計算しなければならないので、Vueのライフサイクルに対して一定の理解が必要です。
ここはデモちゃんです。このデモを通じて、ベtter-scrollの使い方を知ることができます。

<template>
  <div class="wrapper" ref="wrapper"> //  vue   dom             this.$refs
    <ul class="content">
      <li>...</li>
      <li>...</li>
      ...
    </ul>
  </div>
</template>
<script>
  import BScroll from 'better-scroll' //  better-scroll
  export default {
    mounted() {
      this.$nextTick(() => { //    this.$nextTick             
        this.scroll = new Bscroll(this.$refs.wrapper, {}) //    BScroll      ，        dom  
      })
    }
  }
</script>

三、Vueで横スクロールを実現する
1.効果図の比較
元のスクロールを使う:

better-scrollを使う:

2.コード（コメントを見てください）

<template>
  <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="item of 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>
</template>

<script>
import BScroll from 'better-scroll'

export default {
  name: 'HomeRecommand',
  props: {
    recommendList: {
      type: Array,
      required: true
    }
  },
  components: {

  },
  data () {
    return {

    }
  },
  methods: {
    verScroll () {
      let width = this.recommendList.length * 110//             ，       ，                     
      this.$refs.cont.style.width = width + 'px'  //          
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.wrapper, {
            startX: 0,  //           better-scroll     ，      
            click: true,
            scrollX: true,
            scrollY: false,
            eventPassthrough: 'vertical'
          })
        } else {
          this.scroll.refresh() //  dom           
        }
      })
    }
  },
  mounted () {
    this.$nextTick(() => {
      let timer = setTimeout(() => { //              ，          $nextTick，         
        if (timer) {
          clearTimeout(timer)
          this.verScroll()
        }
      }, 0)
    })
  }
}
</script>

<style lang="scss" scoped>
  .recommand-wrap {
    height: 0;
    padding-bottom: 50%;
    margin-top: .2rem;
    background: #fff;
    padding-left: .24rem;
    width: 100%;
    .title {
      position: relative;
      height: 40px;
      display: flex;
      padding: 12px 0;
      box-sizing: border-box;
      .title-img {
        width: 15px;
        height: 15px;
      }
      .title-hotrec {
        font-size: 16px;
        margin-left: 4px;
      }
      .title-allrec {
        position: absolute;
        padding-top: 2px;
        font-size: 13px;
        right: 20px;
        color: gray;
      }
    }
    .cont {
      list-style: none;
      // overflow-x: scroll;  
      white-space: nowrap;
      font-size: 12px;
      text-align: center;
      padding-right: .24rem;
      .cont-item {
        position: relative;
        display: inline-block;
        padding: .06rem 0 .2rem;
        width: 2rem;
        margin: 0 .1rem;
        .cont-img {
          overflow: hidden;
          width: 2rem;
          height: 0;
          padding-bottom: 100%;
          .img {
            width: 100%;
          }
        }
        .cont-dest {
          margin: .1rem 0;
        }
        .cont-price {
          .price {
            color: #ff8300;
          }
        }
      }
    }
  }
</style>

参照リンク
作者：黄逸
リンク:https://zhuanlan.zhihu.com/p/27407024
締め括りをつける
ここで、Vueの中でbetter-scrollのコンポーネントを利用して横スクロールを実現する文章を紹介します。Vue better-scrollの横スクロールの内容については、以前の文章を検索したり、下記の関連記事を見たりしてください。これからもよろしくお願いします。