better-scroll水平滚动使用

1.安装better-scroll:

npm install --save better-scroll

2.【template】

<div class=\"tab\" ref=\"tab\" v-show=\"showphotodetail\">
        <ul class=\"tab_content\" ref=\"tabcontent\">
          <li class=\"tab_item\" v-for=\"(item, index) in lastGameList\" ref=\"tabitem\" >
            <img :src=\"item\">
          </li>
        </ul>
</div>

3.【 】

data】:
lastGameList:[],
methods】: 
    InitTabScroll(){
      for(var i=0;i<10;i++){
        this.lastGameList.push(this.headPortrait);
      }
      let width=126*this.lastGameList.length;
      this.$refs.tabcontent.style.width=width+\'px\';
      this.$nextTick(()=>{
        if(!this.scroll){
          this.scroll=new BScroll(this.$refs.tab,{
            // scrollX:0,
            // click:true,
            scrollX:true,
            // scrollY:false,
            // eventPassthrough:\'vertical\'
          })
        }else{
          this.scroll.refresh();
        }
      })
    },
    photocheck(){
      if(this.showphotodetail==true){
        this.showphoto=\'显示\';
        this.showphotodetail=false;
        this.showovercheck=true;
      }else{
        this.showphoto=\'隐藏\';
        this.showphotodetail=true;
        this.showovercheck=false;
        this.$nextTick(() => {
          this.InitTabScroll();
        });
      }
      
    },

4.【style】

.tab{
  background: #fff;
  height: 104px;
  width:100%;
  white-space: nowrap;
  overflow: hidden;
  background:#fff;
  /* margin-bottom:15px; */
  padding-left:14px;
}
.tab_content{
  /* text-align:center; */
  height:94px;
}
.tab_item{
  display:inline-block;
  height:94px;
  width:123px;
}
.tab_item img{
   -fit: cover;
  border-radius: 2px;
}

5【注意】
v-show:false的时候拿不到clientwidth的值