E企盈营销工具技术服务商 热线:4006-838-530

微信小程序含视频组件的banner轮播使用心得

E企盈直播平台营销卖货系统

背景描述: 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      /viewjs代码:data:{  storeImgs: [],//banner     current:0,//banner当前的index }效果:

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序含视频组件的banner轮播使用心得
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏