在vue项目里面使用better-scroll动态创建多个滚动列表

在vue项目里面使用better-scroll动态创建多个滚动列表

之前的项目有需求如下:
一件商品有一种或者多个种搭配,在商品详情页点击更多搭配,进入搭配页根据其搭配种类动态生成对应的横向滚动条,滚动插件我用的是better-scroll
图片效果如下:

请求回来的数据格式是数组里包含数组,大数组是搭配的种类列表,小数组是对应搭配的单品列表,代码如下:

html页面渲染:

<div class="coll-item-box"  v-for="(item,index) in tryCollArr" :key="index" >
 <div class="coll-main-pic" @click="toStyleDetail(item.id)">
   <img :src="item.imgUrl" alt="">
 </div>
 // 横向滚动组件渲染
 <div class="coll-item" :ref="'collItemScroll'+(index+1)">
   <div class="inner-list clear">
     <div class="inner-item fl" v-for="(item,index) in item.styleList" :key="index" @click="toGoodsDetail(item.id)">
       <img :src="item.imgUrl" alt="">
     </div>
   </div>
 </div>
 <div class="tip-num">{{index+1}}</div>
 <img src="../../../../static/images/icon/more-right.png" alt="" class="slide-right-icon">
</div>

js创建滚动列表:

// 动态生成不确定搭配列表的滚动
for(var i =1;i<=_this.tryCollArr.length;i++){
  var str = "collItemScroll"+i;
  // console.log(_this.$refs[str]);
  if(!_this[str]){
    _this[str] = new _this.$BScroll(_this.$refs[str][0],{
      // 以下几项是better-scroll插件的配置项,具体的根据个人需求变化
      scrollX:true,
      scrollY:false,
      useTransition:false, 
    });
    // console.log(_this[str]);
  }else{
    _this[str].refresh();
  }
}