背景描述:

 1、产品需要banner类似京东app详情页中banner,第一个swiper-item为视频,后面的swiper-item为图片。

2、video组件是由客户端创建的原生组件,它的层级是最高的,不能通过 z-index
控制层级。微信官方已经说明video组件层级最高,并且不能通过z-index来控制


 3、设置第一张图片为视频的占位图片,当点击图片时,将当前占位图片隐藏,显示视频播放器;并添加一个纯黑和banner宽高一样的图层,绝对定位,用来放左右切换按钮,控制banner左右滑动

wxml代码:


<view class='banner-wrapper'> <swiper indicator-dots
indicator-color="{{indicator}}" current="{{current}}"
indicator-active-color="{{activeIndicator}}" class="bn-swiper"
bindchange="bannerChage" duration="300"> <block wx:for="{{storeImgs}}"
wx:key="bn_urls"> <swiper-item> <block wx:if="{{item.type == 1}}"> <view
wx:if="{{isPlay}}" class='video-wrapper'> <video src="{{item.src}}"
class='video' controls id='myVideo'></video> </view> <view wx:else
class='video-host-wrapper' catchtap='play'> <image src="{{storeImgs[1].src}}"
mode='aspectFill' /> <image src='/images/play.png' class='play-icon'></image>
</view> </block> <image src="{{item.src}}" mode='aspectFill' catchtap='preview'
data-url="{{item.src}}" wx:else/> </swiper-item> </block> </swiper> <view
class='banner-mask' wx:if="{{isPlay}}"> <image src='/images/arrow.png'
class='prev' catchtap='goPrev'></image> <image src='/images/arrow.png'
class='next' catchtap='goNext'></image> </view>


js代码:


data:{   storeImgs: [],//banner  current:0,//banner当前的index  }




效果:






友情链接
ioDraw流程图
API参考文档
OK工具箱
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:637538335
关注微信