better-scroll使用（横向滚动条轮播）

横向滚动条除了要引入这个插件以外， 容器也要设置css属性

<template>
  <div class="box">
    <!-- 横向滚动条 -->

    <div class="recommand-wrap" ref="wrapper">
      <!-- /* 这里是父盒子*/ -->
      <ul class="cont" ref="cont">
        <!-- /* 这里是子盒子，即滚动区域*/ -->
        <li class="Cbox"  ref="cont2">
          <img src="../../../public/sp1.png" />
          <div class="txtBox">
            <h6>研发 Research and development</h6>
            <div class="txt">
              倾后CHIIIHO始终选择珍贵自然中提取的天然成分，为每款产品
              研制理想的科学配方，经过数万次的实验验证，最大限度的发挥
              产品效力......
            </div>
          </div>
        </li>

         <li class="Cbox">
          <img src="../../../public/sp1.png" />
          <div class="txtBox">
            <h6>研发 Research and development</h6>
            <div class="txt">
              倾后CHIIIHO始终选择珍贵自然中提取的天然成分，为每款产品
              研制理想的科学配方，经过数万次的实验验证，最大限度的发挥
              产品效力......
            </div>
          </div>
        </li>

        <li class="Cbox">
          <img src="../../../public/sp1.png" />
          <div class="txtBox">
            <h6>研发 Research and development</h6>
            <div class="txt">
              倾后CHIIIHO始终选择珍贵自然中提取的天然成分，为每款产品
              研制理想的科学配方，经过数万次的实验验证，最大限度的发挥
              产品效力......
            </div>
          </div>
        </li>
         <li class="Cbox">
          <img src="../../../public/sp1.png" />
          <div class="txtBox">
            <h6>研发 Research and development</h6>
            <div class="txt">
              倾后CHIIIHO始终选择珍贵自然中提取的天然成分，为每款产品
              研制理想的科学配方，经过数万次的实验验证，最大限度的发挥
              产品效力......
            </div>
          </div>
        </li>
        

      </ul>
    </div>
  </div>
</template>

<script>
const { log } = console
import BScroll from 'better-scroll' //导入better-scroll
export default {
  name: 'swiperAssembly',

  data() {
    return {
      recommendList: [
        {
          url:
            'https://imgs.qunarzz.com/piao/fusion/1711/16/bfbb9874e8f11402.png',
          text: '巴黎',
          price: '50',
        },
        {
          url:
            'https://imgs.qunarzz.com/piao/fusion/1711/16/bfbb9874e8f11402.png',
          text: '巴黎',
          price: '50',
        },
        {
          url:
            'https://imgs.qunarzz.com/piao/fusion/1711/16/bfbb9874e8f11402.png',
          text: '巴黎',
          price: '50',
        },
        {
          url:
            'https://imgs.qunarzz.com/piao/fusion/1711/16/bfbb9874e8f11402.png',
          text: '巴黎',
          price: '50',
        },
      ],
    }
  },
  mounted() {
    this.$nextTick(() => {
      let timer = setTimeout(() => {
        // 其实我也不想写这个定时器的，这相当于又嵌套了一层$nextTick，但是不这么写会失败
        if (timer) {
          clearTimeout(timer)
          this.verScroll()
        }
      }, 0)
    })
    log(this.$refs)
    log(this.$refs.cont2.clientWidth)
  },
  methods: {
    verScroll() {
      let width = this.$refs.cont2.clientWidth * this.recommendList.length+100 // 动态计算出滚动区域的大小，前面已经说过了，产生滚动的原因是滚动区域宽度大于父盒子宽度
      // 200这个是自定义数字
      // log(this.recommendList.length)
      log(width)
      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结构发生改变调用该方法
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
$sc: 50;
@function pxToRem($px) {
  @return $px/$sc + rem;
}

.recommand-wrap {
  // display: flex;
  // float: left;
  // border: 1px solid #000;
  // height: 300px;
  margin-top:pxToRem(100);
  background: #fff;
  width: pxToRem(744);
  overflow-y: hidden;
  overflow-x: scroll;
  &::-webkit-scrollbar {
    display: none;
  }

    .Cbox {
      display: inline-block!important;
      // width: pxToRem(620);
      height: pxToRem(660);
      margin-right: pxToRem(40);
      img {
        width: pxToRem(620);
        height: pxToRem(490);
      }
      .txtBox {
        padding-left:pxToRem(20);
        margin: pxToRem(26) 0 0 0;
        width: pxToRem(620);
        box-sizing: border-box;
        h6 {
          font-size: pxToRem(18);
          color: #0a0000;
          margin-bottom: pxToRem(16);
        }
        .txt {
          height: pxToRem(114);
          font-size: pxToRem(16);
          line-height: pxToRem(32);
        }
      }
    }
  
}
</style>