better-scroll实现横向滚动列表

<template>
  <div class="wrapper" ref="wrapper">
    <ul class="list" ref="list">
      <router-link to="/goodsDetail" class="itembox" v-for="(item,i) in currentKillList" :key="i">
        <div class="imgs">
          <img :src="item.photo" alt class="goodsImg">
          <img :src="tingshow" class="tingshow">
        </div>
        <p class="title">{{item.goodsName}}</p>
        <div class="price">
            <span>￥{{item.secondKillStartPrice / 100}}</span>
            <img :src="oval">
        </div>
        <span class="market">赚{{item.referencePrice / 100}}</span>
      </router-link>
    </ul>
  </div>
</template>
<script>
import tingshow from "%/chsImg/soldStop.png";
import oval from "%/chsImg/oval.png";
import BScroll from "better-scroll";
export default {
  data() {
    return {
      // 图片
      tingshow,
      oval,
      currentKillList: [
        {
          goodsId: "9394",
          photo:
            "http://img4.imgtn.bdimg.com/it/u=3282661455,864252229&fm=26&gp=0.jpg",
          saleable: false,
          goodsName: "南美洲车厘子5kg/桶",
          secondKillStartPrice: 109,
          referencePrice: 139
        },
        {
          goodsId: "9394",
          photo:
            "http://img4.imgtn.bdimg.com/it/u=3282661455,864252229&fm=26&gp=0.jpg",
          saleable: false,
          goodsName: "南美洲车厘子5kg/桶",
          secondKillStartPrice: 109,
          referencePrice: 139
        },
        {
          goodsId: "9394",
          photo:
            "http://img4.imgtn.bdimg.com/it/u=3282661455,864252229&fm=26&gp=0.jpg",
          saleable: false,
          goodsName: "南美洲车厘子5kg/桶",
          secondKillStartPrice: 109,
          referencePrice: 139
        },
        {
          goodsId: "9394",
          photo:
            "http://img4.imgtn.bdimg.com/it/u=3282661455,864252229&fm=26&gp=0.jpg",
          saleable: false,
          goodsName: "南美洲车厘子5kg/桶",
          secondKillStartPrice: 109,
          referencePrice: 139
        },
        {
          goodsId: "9394",
          photo:
            "http://img4.imgtn.bdimg.com/it/u=3282661455,864252229&fm=26&gp=0.jpg",
          saleable: false,
          goodsName: "南美洲车厘子5kg/桶",
          secondKillStartPrice: 109,
          referencePrice: 139
        },
        {
          goodsId: "9394",
          photo:
            "http://img4.imgtn.bdimg.com/it/u=3282661455,864252229&fm=26&gp=0.jpg",
          saleable: false,
          goodsName: "南美洲车厘子5kg/桶",
          secondKillStartPrice: 109,
          referencePrice: 139
        },
        {
          goodsId: "9394",
          photo:
            "http://img4.imgtn.bdimg.com/it/u=3282661455,864252229&fm=26&gp=0.jpg",
          saleable: false,
          goodsName: "南美洲车厘子5kg/桶",
          secondKillStartPrice: 109,
          referencePrice: 139
        },
        {
          goodsId: "9394",
          photo:
            "http://img4.imgtn.bdimg.com/it/u=3282661455,864252229&fm=26&gp=0.jpg",
          saleable: false,
          goodsName: "南美洲车厘子5kg/桶",
          secondKillStartPrice: 109,
          referencePrice: 139
        }
      ]
    };
  },

  //DOM已經成功渲染完成
  mounted() {
    //等到內容將div撑开之后，在对better-scroll的实例初始化
    //初始化的时机很重要
    this.$nextTick(() => {
      this._initPics(); //商家实景的横向滚动
    });
  },
  watch: {
    //监听currentKillList变量的值的变化在初始化
    //防止滚动不生效
    currentKillList() {
      this.$nextTick(() => {
        this._initPics();
      });
    }
  },
  methods: {
    //用于初始化“商家实景”的横向滚动效果
    _initPics() {
      //先判断是否有这个属性
      if (this.currentKillList) {
        //这里之所以要设置宽度，是因为.wrapper和.list的宽度一样大
        //当.list的宽度大于.wrapper的宽度，才能横向滚动
        let itemWidth = 90; //这里是设置列表每一项的宽度
        let margin = 6;
        //width是整个列表的宽度
        let width = (itemWidth + margin) * this.currentKillList.length - margin;
        console.log(width);
        this.$refs.list.style.width = width + "px"; //设置.list的宽度的宽度
        this.$nextTick(() => {
          if (!this.picScroll) {
            this.picScroll = new BScroll(this.$refs.wrapper, {
              scrollX: true,
              eventPassthrough: "vertical" //忽略竖直方向的滚动
            });
          } else {
            this.picScroll.refresh();
          }
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.wrapper {
  width: 100%;
  overflow: hidden;
  white-space: nowrap; /*当子元素超过父元素宽度的时候，不会折行*/
  .list {
      display: flex;
      padding:0 32px;
      background-color: #fff;
    .itembox {
        width:180px;
        margin-right:32px;
        padding-bottom:24px;
        line-height: 40px;
        font-family:PingFangSC-Regular;
        font-size: 28px;
        color:#333 !important;
        .imgs{
            position: relative;
            width:100%;
            height:180px;
            margin-bottom:8px;
            .goodsImg{
                max-width: 100%;
                max-height: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            .tingshow{
                width:120px;height:120px;
                position: absolute;
                top:50%;left:50%;
                transform: translate(-50%,-50%);
                z-index: 500;
            }
        }
        .title{
            white-space: normal;
        }
        .price{
            display: flex;
            justify-content: space-between;
            font-size: 22px;
            img{
                width:44px;height:44px;
            }
        }
        .market{
            font-size: 26px;
            color:#EB4639;
        }
    }
  }
}
</style>