better-scroll水平滚动使用

最新推荐文章于 2024-05-11 06:52:18 发布

前端技术负责人

最新推荐文章于 2024-05-11 06:52:18 发布

阅读量2.4k

点赞数

分类专栏： web前端文章标签： vue betterscroll

本文链接：https://blog.csdn.net/weixin_43837268/article/details/85111557

版权

web前端专栏收录该内容

420 篇文章 10 订阅

订阅专栏

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.【script】

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{
  object-fit: cover;
  border-radius: 2px;
}

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