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的值