微信小程式視訊層級過高問題與淘寶商品詳情相簿展示效果
1.效果圖
2.html
<view class="banner" >
<view class='current_num'>{{current}}/{{imgNum}}</view>
<swiper circular duration="1000" bindchange="swiperChange">
<swiper-item wx:for="{{bannerlist}}" wx:key="*this">
<view wx:if="{{item.type==0}}">
<image src="{{item.img}}" class="img"></image>
</view>
<view wx:else>
<view wx:if="{{fmShow==true}}">
<view class='btn_view centerboth' wx:if="{{item.video==''}}"></view>
<view class='btn_view centerboth' wx:else bindtap='btnPlay'><image src='../../icon/playBtn.png'></image></view>
<image class='fmimg' src='{{item.img}}'></image>
</view>
<video wx:if="{{fmShow==false}}" id="myVideo" src="{{item.video}}"></video>
</view>
</swiper-item>
</swiper>
</view>
3.js部分、
swiperChange:function(e){//輪播swiper的時候關閉音訊播放，封面圖片顯示
var that=this;
this.videoContext.pause();
var current = e.detail.current+1;
that.setData({
current: current,
fmShow:true,
})
},
btnPlay: function () {//播放視訊隱藏封面圖
var that = this;
that.setData({
fmShow: false,
})
this.videoContext.play();
},
4.css部分
.banner{
width: 750rpx;
height:705rpx;
overflow: hidden;
position: relative;
}
.banner swiper{
width: 750rpx;
height:705rpx;
}
.banner swiper view{
width: 750rpx;
height:705rpx;
position: relative;
}
.banner image{
width: 100%;
height:705rpx;
}
.banner video{
width: 100%;
height: 100%;
}
.banner .btn_view{
position: absolute;
width: 750rpx;
height:705rpx;
left: 0;
top: 0;
z-index: 100;
}
.banner .btn_view image{
width: 52rpx !important;
height: 52rpx !important;
}
.fmimg{
position: absolute;
width: 750rpx;
height:705rpx;
left: 0;
top: 0;
z-index: 99;
}
.current_num{
position: absolute;
width: 90rpx;
height: 35rpx;
background: rgba(0, 0, 0, 0.5);
color: #fff;
z-index: 99;
text-align: center;
font-size: 22rpx;
border-radius: 35rpx;
bottom: 35rpx;
right: 25rpx;
}