微信小程序视频层级过高问题与淘宝商品详情相册展示效果

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;}

微信小程序视频层级过高问题与淘宝商品详情相册展示效果相关推荐

解决微信小程序textarea层级太高遮挡其他组件的问题
解决微信小程序textarea层级太高遮挡其他组件的问题参考文章: (1)解决微信小程序textarea层级太高遮挡其他组件的问题 (2)https://www.cnblogs.com/pansid ...
微信小程序echarts层级太高
项目中因为需求,底部的tab导航栏是自己写的,在开发者工具中一切正常:但是在真机上页面滑动时,echarts的层级比tab高,调过两者的z-index后仍然如此. 经过查找后发现cover-view和 ...
input层级高小程序_微信小程序textarea层级过高(盖住其他元素)问题的解决办法...
1.首先,textarea为微信小程序原生组件,其层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上. 2.解决方法: 方法一:可通过官方提供的标签嵌套view或 ...
微信小程序左侧竖形滑动菜单（仿淘宝分类界面）
界面如下: 1.category.js中data初始化的数据(模拟),如果是跟后台数据库挂钩,可以用wx.request请求返回相似的对象数组再绑定到cartItems中. data: {cateIt ...
视频教程-微信小程序项目实战：高仿iOS计算器-微信开发
微信小程序项目实战:高仿iOS计算器东北大学计算机专业硕士研究生,欧瑞科技创始人&CEO,曾任国内著名软件公司项目经理,畅销书作者,企业IT内训讲师,CSDN学院专家讲师,制作视频课程超过1 ...
详细解析黑马微信小程序视频--【思维导图知识范围】
语言视频选择收录专辑链接 C 张雪峰推荐选择了计算机专业之后-在大学期间卷起来-[大学生活篇] JAVA 黑马B站视频JAVA部分的知识范围.学习步骤详解 JAVAWEB 黑马B站视频JAVAWEB ...
第21课微信小程序视频标签显示弹幕
第21课微信小程序视频标签显示弹幕效果图如下: wxml代码如下: <videosrc="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideo ...
微信小程序视频上传组件直接上传至阿里云OSS
一.微信小程序视频上传组件示例多视频上传功能,直传OSS,可以直接从OSS删除:组织接受以逗号分隔的视频url地址,自动列出多个视频,但点击上传按钮上传视频后,同样返回以逗号分隔的视频url地址. ...
微信小程序视频列表封面图禁止多个视频同时播放
微信小程序视频列表用到的组件是 video 链接 https://developers.weixin.qq.com/miniprogram/dev/component/video.html 先附上 ...

微信小程序视频层级过高问题与淘宝商品详情相册展示效果

微信小程序视频层级过高问题与淘宝商品详情相册展示效果相关推荐

最新文章

热门文章