1【template】
<img :src="item" @click="showbigimage(item)">
<transition name="bulletin-detail">
<div class="bulletin-detail" v-show="showbig" @touchmove.prevent @click="closebigimage">
<div class="detail-wrapper">
<div class="main-wrapper">
<img :src="bigdetailimage" alt="">
</div>
</div>
</div>
</transition>
2.【script】
data】
showbig:false,
bigdetailimage:'',
method】
showbigimage(item){
this.bigdetailimage=item;
this.showbig=true;
},
closebigimage(){
this.showbig=false;
},
3【style】
.bulletin-detail {
width: 100%;
height: 100%;
left: 0;
top: 0;
background: #333333;
z-index: 2;
position: fixed;
}
.bulletin-detail .detail-wrapper {
width: 100%;
height: 100%;
/* padding: 90px 0px 125px; */
box-sizing: border-box;
display: table;
position: fixed;
}
.main-wrapper{
display: table-cell;
vertical-align: middle;
}
注意 】
在better中加:
scrollX:0,
// click:true,
scrollX:true,
scrollY:false,
eventPassthrough:'vertical'