小程序轮播中嵌入视频-关于swiper、video组件与block标签
时间:2022-07-23
本文章向大家介绍小程序轮播中嵌入视频-关于swiper、video组件与block标签,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一、官方文档
about video Component about swiper Component
二、注意事项
注意事项
三、卡片式轮播效果图
效果图
四、示例代码
blcok标签不做渲染
<view id='banner' style="{{banner == ''?'display:none':''}}">
<!-- <swiper indicator-dots="{{true}}" indicator-color="#ffffff" autoplay="true" circular="true" >
<block wx:for="{{banner}}" wx:key="*this" >
<swiper-item>
<image src='{{item}}'mode="aspectFill" style="width:100%;height:100%;" mode="widthFix" />
</swiper-item>
</block>
</swiper> -->
<swiper class="card-swiper {{DotStyle?'square-dot':'round-dot'}}" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500" bindchange="cardSwiper" indicator-color="#8799a3" indicator-active-color="#0081ff">
<swiper-item>
<block>
<!-- <view class="swiper-item"> -->
<video
autoplay
loop
class="swiper-item"
show-play-btn="{{true}}"
controls="{{true}}"
objectFit="cover"
loop='{{false}}'
show-mute-btn='{{true}}'
vslide-gesture-in-fullscreen='{{true}}'
src="https://xxxxx.mp4"
></video>
<!-- </view> -->
</block>
<!-- autoplay
loop="{{false}}"
bindplay="handlePlayVideo"
bindpause = 'handleStopVideo' -->
<!-- show-play-btn="{{true}}" controls="{{true}}" objectFit="cover" loop='{{false}}' show-mute-btn='{{true}}' vslide-gesture-in-fullscreen='{{true}}' -->
</swiper-item>
<swiper-item wx:for="{{banner}}" wx:key="*this" class="{{cardCur==index?'cur':''}}">
<view class="swiper-item">
<image src="{{item}}" mode="aspectFill"></image>
<!-- <video src="{{item.video}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover" wx:if="{{item.type=='video'}}"></video> -->
</view>
</swiper-item>
</swiper>
</view>
- 全球AI新闻创新实践系列③:华邮、雅虎、美联社、Quartz怎么干!
- nginx+php负载均衡集群环境中的session共享方案梳理
- PowerPoint发布及链接图片的处理
- EXCEL单元格的引用方式
- SqlDependency学习笔记
- linux系统下对网站实施负载均衡+高可用集群需要考虑的几点
- 运维利器-ClusterShell集群管理操作记录
- img标签的src=""会引起的Page_Load多次执行
- 2017影响扑克圈的黑暗事件
- 全量备份/增量备份/差异备份说明
- 子分类的合计
- FckEditor 2.6.4升级手记
- 负载均衡环境下的web服务器处理
- 不止抢工作 人工智能还有了“小情绪”
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Day21.Python项目案例
- Day18.python文件/目录
- Kotlin学习日志(六)控件使用
- Android 天气APP(一)开发准备
- Android 天气APP(二)获取定位信息
- Android 天气APP(三)访问天气API与数据请求
- Android 天气APP(四)搭建MVP框架与使用
- Android 天气APP(五)天气预报、生活指数的数据请求与渲染
- Android 天气APP(六)旋转风车显示风力、风向
- Android 天气APP(七)城市切换 之 城市数据源
- Elasticsearch: Reindex接口
- Android Studio 更新版本之后报错: Cannot access android.arch.lifecycle.ViewModelStoreOwner
- Android各版本查询和开启悬浮窗权限
- RuntimeException: setAudioSource failed异常
- Java&Android获取当前日期、时间、星期几、获取指定格式的日期时间、时间戳工具类包含使用示例