vue 手机端 better-scroll实现横向滚动

第一步：页面布局

<template>
<div  class="couponWrap" ref="couponWrap">
    <ul class="coupon" ref="coupon">
                <li>第一张图 </li>
                <li>第一张图</li>
                <li>第一张图</li>
    </ul>
</div>
</template>
<style>
.couponWrap{
  width:100%;
  overflow:hidden
}
.coupon{
white-space: nowrap;//可以让ul里的元素成一排
}
</style>

第二步：业务逻辑

<script>
import BScroll from 'better-scroll'
export default {
created(){
   let timer = setTimeout(() => { // 不嵌套一个定时器会失败
        if (timer) {
          clearTimeout(timer)
          this.couponScrollHandle()
        }
      }, 0)
},
methods:{
 couponScrollHandle () {
        let width = this.recommendList.length * 3.03// 动态计算出滚动区域的大小，前面已经说过了，产生滚动的原因是滚动区域宽度大于父盒子宽度
        if(this.$refs.coupon){
          this.$refs.coupon.style.width = width + 'rem'  // 修改滚动区域的宽度
        }
        this.$nextTick(() => {
          if (!this.couponScroll) {
            this.couponScroll = new BScroll(this.$refs.couponWrap, {
              startX: 0,  // 配置的详细信息请参考better-scroll的官方文档，这里不再赘述
              click: true,
              scrollX: true,
              scrollY: false,
              eventPassthrough: 'vertical'
            })
          } else {
            this.couponScroll.refresh() //如果dom结构发生改变调用该方法
          }
        })
      }
   }
}
</script>