微信小程序含视频组件的banner轮播使用心得
程序员文章站
2022-06-14 13:03:44
...
背景描述:
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
}
效果:
上一篇: 1、微信小程序学习:基本控件的使用
下一篇: java发送邮件
推荐阅读
-
微信小程序 image组件binderror使用例子与js中的onerror区别
-
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
-
微信小程序 image组件binderror使用例子与js中的onerror区别
-
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
-
微信小程序 组件的外部样式externalClasses使用详解
-
微信小程序使用swiper组件实现类3D轮播图
-
微信小程序使用swiper组件实现层叠轮播图
-
微信小程序新增的拖动组件movable-view使用教程
-
微信小程序自定义toast组件的方法详解【含动画】
-
微信小程序icon组件的使用