微信小程序swiper 视频中间大,两边小,轮播滑到中间视频自动播放组件教程

静态效果:

 进入下面小程序可以体验效果,点击底部 看剧 栏目 

 

 一、创建小程序组件

二、代码

1、WXML

<view class="swiper-wrapper" 
style="background-image:url(/asset/image/hot-banner.jpg);background-size: 100% 100%;"><swiperclass="main-sw"autoplay="{{false}}"circular="{{true}}"interval="{{5000}}" duration="{{500}}"current="{{posterList.length>2?1:0}}"previous-margin="255rpx"next-margin="255rpx"bindchange="swiperChange"><block wx:for="{{posterList}}" wx:key="index"><swiper-item ><view class="swiper-item {{currentIndex==index?'swiper-item-active':'swiper-item-noactive'}}"><videoclass="vie" id="{{'at_'+index}}"custom-cache="{{false}}"autoplay="{{currentIndex==index?true:false}}"data-index="{{index}}"bindplay="videoPlay"play-btn-position="center"show-bottom-progress="{{false}}"loop="{{currentIndex==index?true:false}}"enable-progress-gesture="{{false}}"show-fullscreen-btn="{{false}}"object-fit="fill" src="{{item.url}}"poster=""/></view></swiper-item></block></swiper>
</view>

2、wxss

.swiper-wrapper{flex: 1;width: 100%;height: 100%;margin: 0 auto;border-radius: 20rpx;
}
.main-sw{width: 100%;height: 430rpx;
}.swiper-item{height: 450rpx;display: flex;align-items: center;
}.swiper-item .vie{width: 180rpx;height: 300rpx;margin: 0 auto;border-radius: 20rpx;transition: all 0.6s;
}.swiper-item-noactive{padding-top: 30rpx;transition: all 0.6s;
}.swiper-item-active{transition: all 0.6s;
}.swiper-item-active .vie{width: 100%;height: 360rpx;transition: all 0.6s;
}

 3、JS

// components/swiper-video/swiper-video.js
Component({lifetimes: {ready: function() {}},/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {currentIndex: 1,preIndex:-1,posterList: [{id: '1', url: 'https://tx2.a.kwimgs.com/upic/2024/02/15/15/BMjAyNDAyMTUxNTQ0NTNfMjI1MzQ2MDQxMV8xMjUwMDcyMDgyODZfMV8z_b_B5e4c6a553c4e284e7941a0ded6c00abb.mp4?tag=1-1708249770-unknown-0-p3ytzdyhr9-044ff73795d79af2&clientCacheKey=3xypn8bt5vm7w5q_b.mp4&bp=10000&tt=b&ss=vp'},{id: '2', url: 'https://tx2.a.kwimgs.com/upic/2024/01/30/16/BMjAyNDAxMzAxNjQwMzJfMzgyMzQ3MjQ1XzEyMzUyMTMwODU4NF8xXzM=_b_Be0f3bfddfb287f120ec484218179d214.mp4?tag=1-1708249795-unknown-0-4piuyvkt6d-783157ecbf33a1a3&clientCacheKey=3xpwz2fks5az6r4_b.mp4&bp=10000&tt=b&ss=vp'},{id: '3', url: 'https://tx2.a.kwimgs.com/upic/2024/02/17/14/BMjAyNDAyMTcxNDI0NDZfMTI5OTg4NTg4NV8xMjUxODQ5NTczNDRfMF8z_b_B3c596afe9e6ddc96e88d71351da052ac.mp4?tag=1-1708249822-unknown-0-ab5yaqiqon-f89388c9a0fbea5f&clientCacheKey=3x8669dhkxfztyc_b.mp4&bp=10000&tt=b&ss=vp'},{id: '4', url: 'https://tx2.a.kwimgs.com/upic/2024/02/17/17/BMjAyNDAyMTcxNzExMDRfMjM0NzM2OTY3OV8xMjUxOTkzNTUwOTlfMF8z_b_B531ec3a51ae00fdf805e892aefbf6733.mp4?tag=1-1708249852-unknown-0-jde8ia4ef8-80944aff380e6a62&clientCacheKey=3xzj5p23mfrrsm9_b.mp4&bp=10000&tt=b&ss=vp'},{id: '5', url: 'https://tx2.a.kwimgs.com/upic/2024/02/18/11/BMjAyNDAyMTgxMTAyMzdfMTYzNTI5NjEzNV8xMjUyNjE0MjQ4NTJfMF8z_b_B3da4064bfef058d0c2821f64f24d863e.mp4?tag=1-1708249875-unknown-0-oudstqms9g-770ac56e97209131&clientCacheKey=3xfywqaqhr4xav4_b.mp4&bp=10000&tt=b&ss=vp'},{id: '6', url: 'https://tx2.a.kwimgs.com/upic/2023/12/08/14/BMjAyMzEyMDgxNDA1NThfMjEwNjQzMjExMV8xMTkxMTE3NDE1NzVfMV8z_b_Ba62e8a6ff0405a74160c6887700f4d6c.mp4?tag=1-1708177895-unknown-0-9bhguogrkc-94f990275f193667&clientCacheKey=3xsxvbspa44ezue_b.mp4&bp=10000&tt=b&ss=vp'},{id: '7', url: 'https://tx2.a.kwimgs.com/upic/2024/01/17/13/BMjAyNDAxMTcxMzMyMDZfMzg1MTI1NDMwMV8xMjIzMjA4MTg1MzJfMl8z_b_B64de3e477a3c56931c2e1c869455bb8a.mp4?tag=1-1708249935-unknown-0-8hoxqf5mqv-06a7d7fd75d38e4b&clientCacheKey=3xns4fd3r5iw3mq_b.mp4&bp=10000&tt=b&ss=vp'},{id: '8', url: 'https://tx2.a.kwimgs.com/upic/2024/01/02/19/BMjAyNDAxMDIxOTIxMDNfMzg4MTc4NzIwM18xMjEyMTY2NjYzOTNfMl8z_b_B7243f24b02219e4fafb2aa4e92cc5395.mp4?tag=1-1708249950-unknown-0-p2dy8mumai-fe39fb7133a179af&clientCacheKey=3xjxfvd5cnhip2u_b.mp4&bp=10000&tt=b&ss=vp'},{id: '9', url: 'https://tx2.a.kwimgs.com/upic/2024/02/16/17/BMjAyNDAyMTYxNzU3MTRfMTU2ODQ2MzM2Ml8xMjUxMTA1MDIwMDZfMV8z_b_B74927e5fb4232fc899c57f2e68fa5582.mp4?tag=1-1708249967-unknown-0-vrnqcigp6e-3d0aa458f1aaf315&clientCacheKey=3xu5uaiuju6y5xu_b.mp4&bp=10000&tt=b&ss=vp'},{id: '10', url: 'https://tx2.a.kwimgs.com/upic/2024/01/01/11/BMjAyNDAxMDExMTAxMjhfMTk3MDc5MTUxMV8xMjExMDExOTE1ODVfMV8z_b_B6fc046ba1a3cc0b114ffb7a3feb87c68.mp4?tag=1-1708250014-unknown-0-glxnbdhuvo-79c4b0891fd217ee&clientCacheKey=3x43rid7dz3y7pk_b.mp4&bp=10000&tt=b&ss=vp'},]},/*** 组件的方法列表*/methods: {//视频切换swiperChange(event){if(this.data.preIndex>-1){var cxt = wx.createVideoContext('at_'+this.data.preIndex, this);//停止前一个视频的播放cxt.stop();//将视频重头开始播放cxt.seek(10000);}let {current} = event.detail;var cxt = wx.createVideoContext('at_'+current, this);cxt.play();this.setData({currentIndex: current,preIndex: current})},//视频播放videoPlay(e){this.setData({preIndex: e.currentTarget.dataset.index})}}
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/260193.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

android 15

https://android-developers.googleblog.com/2024/02/first-developer-preview-android15.html android 15的预览版出了&#xff0c;这个版本的发布计划大概是这样的&#xff08;大约是今年8月发布最终版本&#xff09; https://developer.android.com/about/versions/15/over…

Java+Swing+Txt实现通讯录管理系统

目录 一、系统介绍 1.开发环境 2.技术选型 3.功能模块 4.系统功能 1.系统登录 2.查看联系人 3.新增联系人 4.修改联系人 5.删除联系人 5.工程结构 二、系统展示 1.登录页面 2.主页面 3.查看联系人 4.新增联系人 5.修改联系人 三、部分代码 Login FileUtils …

BUGKU-WEB 源代码

题目描述 题目截图如下&#xff1a; 进入场景看看&#xff1a; 解题思路 你说啥就是啥&#xff1a;去源代码吧 相关工具 URL解码平台&#xff1a;https://www.iamwawa.cn/urldecode.html 解题步骤 随便输入试试 2. 看看源码 存在script&#xff1a; <script> …

芯课堂 | 一种无霍尔直流无刷电机控制器

​本次介绍一种无霍尔直流无刷电机控制器&#xff0c;该电机控制器包括&#xff1a;MCU控制模块的输出端连接预驱动模块的输入端&#xff0c;预驱动模块的输出端连接驱动模块的输入端&#xff0c;驱动模块的输出端连接无霍尔电机的三相输入端&#xff1b;驱动模块包括由三路集成…

【前端】Vue-Cli 快速创建Vue3项目及一些项目初始化相关

文章目录 前言1. 安装1.1 安装 Vue 脚手架1.2 创建项目1.3 本地运行项目 2. 推送到仓库2.1 远程仓库准备2.2 关于gitIgnore文件2.3 通过git推送至远程仓库 3. 补充与总结3.1 npm 版本是否要升级到最新&#xff1f;3.2 这个项目建议的各种版本3.3 一般前端gitIgnore文件3.4 推荐…

二.重新回炉Spring Framework:Spring Framework主要组件概览

1.写在前面的话 这里主要简单说一下Spring Framework的几个核心组件的总体情况。为了比较直观&#xff0c;这里使用了ClassPathXmlApplicationContext的类图来进行说明。它基本上包含了 IoC 体系中大部分的核心类和接口。类图如下图所示&#xff1a; 2.Resource 组件体系 R…

【C语言】长篇详解,字符系列篇2-----受长度限制的字符串函数,strncpy,strncat,strncmp函数的使用和模拟实现【图文详解】

欢迎来CILMY23的博客喔&#xff0c;本期系列为【【C语言】长篇详解&#xff0c;字符系列篇2-----“混杂”的字符串函数&#xff0c;字符串函数的使用和模拟实现【图文详解】&#xff0c;图文讲解各种字符串函数&#xff0c;带大家更深刻理解C语言中各种字符串函数的应用&#x…

【常识】大数据设计基础知识

底层存储&#xff1a;hadoop&#xff08;hdfsmapreduce&#xff09; Hadoop已经有十几年的历史&#xff0c;它是大数据领域的存储基石&#xff0c;HDFS目前仍然没有成熟替代品;MapR 文件系统在业内已经具有一定知名度了&#xff0c;不仅 MapR 宣布它自己的文件系统比 HDFS 快2-…

Python 文本处理和语义分析2 使用m3e对文本向量化

说明 向量化将会是下一阶段演进的目标。 在过去的实践中&#xff0c;向量或者矩阵其实是最贴近工具端的。 以sklearn为例&#xff0c;虽然原始数据可能还是自然语言&#xff0c;但是在最终执行 fit或者predict之前&#xff0c;数据一般都转为了矩阵形态(numpy)。也就是说&…

MongoDB文档插入

文章目录 MongoDB文档插入对比增删改查文档插入 MongoDB写安全机制非确认式写入 MongoDB文档查询参数说明查询操作符比较查询操作符逻辑查询操作符元素查询操作符数组查询操作符 模糊查询区别:$regex操作符中的option选项 MongoDB游标介绍游标函数手动迭代游标示例游标介绍 Mon…

韶音获36氪年度企业称号,开放式创新成年度焦点

近日,在36氪的商业之王大会上,年度开放式创新企业、年度新经济高成长企业等榜单揭晓,阿里云、保时捷、美的、蚂蚁集团、科大讯飞等纷纷上榜,而运动耳机的领导品牌Shokz韶音,以其在开放式/不入耳耳机领域深厚的积累,同样获奖。韶音运动舒适耳机新推出的爆款产品——不入耳蓝牙耳…

2024国产中文免费版数据恢复软件EasyRecovery易恢复专业版

EasyRecovery易恢复专业版是全球最好的数据恢复软间&#xff0c;文件恢复专家。EasyRecovery是一款操作安全、价格便宜、用户自主操作的非破坏性的只读应用程序&#xff0c;它不会往源驱上写任何东西&#xff0c;也不会对源驱做任何改变。它支持从各种各样的存储介质恢复删除或…

软件实例分享,操作简单美发店会员登记记账本vip会员管理系统软件教程

软件实例分享&#xff0c;操作简单美发店会员登记记账本vip会员管理系统软件教程 一、前言 以下软件程序教程以 佳易王美发店会员管理系统软件V16为例说明 软件文件下载可以点击最下方官网卡片——软件下载——试用版软件下载 1、新会员可以直接使用手.机号&#xff0c;不需…

202427读书笔记|《猫的自信:治愈系生活哲学绘本》——吸猫指南书,感受猫咪的柔软慵懒与治愈

202427读书笔记|《猫的自信&#xff1a;治愈系生活哲学绘本》——吸猫指南书&#xff0c;感受猫咪的柔软慵懒与治愈 《猫的自信&#xff1a;治愈系生活哲学绘本》作者林行瑞&#xff0c;治愈系小漫画绘本&#xff0c;10分钟可以读完的一本书&#xff0c;线条明媚&#xff0c;自…

从零开始学习Netty - 学习笔记 - NIO基础 - ByteBuffer: 简介和基本操作

NIO基础 1.三大组件 1.1. Channel & Buffer Channel 在Java NIO&#xff08;New I/O&#xff09;中&#xff0c;“Channel”&#xff08;通道&#xff09;是一个重要的概念&#xff0c;用于在非阻塞I/O操作中进行数据的传输。Java NIO提供了一种更为灵活和高效的I/O处理方…

【Redis,Java】Redis的两种序列化方式—nosql数据库

redis和mysql的区别&#xff1a; redis是属于nosql的数据库&#xff0c;而mysql是属于sql数据库&#xff0c;redis是属于nosql数据库。mysql是存储在磁盘中的&#xff0c;redis是存储在内存中的&#xff0c;所以redis的读取书读快。这里所说的redis代表nosql&#xff0c;而mysq…

【打工日常】使用docker部署可视化工具docker-ui

一、docker-ui介绍 docker-ui是一个易用且轻量化的Docker管理工具&#xff0c;透过Web界面的操作&#xff0c;方便快捷操作docker容器化工作。 docker-ui拥有易操作化化界面&#xff0c;不须记忆docker指令&#xff0c;仅需下载镜像即可立刻加入完成部署。基于docker的特性&…

数据分析 - 机器学习

1&#xff1a;线性回归 线性回归是一种统计技术用于对输出变量与一个或多个输入变量之间的关系进行建模 用外行人的话来说&#xff0c;将其视为通过某些数据点拟合一条线&#xff0c;如下所示 以便在未知数据上进行预测&#xff0c;假设变量之间存在线性关系 点和线之间存在微小…

OpenCV中的边缘检测技术及实现

介绍: 边缘检测是计算机视觉中非常重要的技术之一。它用于有效地识别图像中的边缘和轮廓&#xff0c;对于图像分析和目标检测任务至关重要。OpenCV提供了多种边缘检测技术的实现&#xff0c;本博客将介绍其中的两种常用方法&#xff1a;Canny边缘检测和Sobel边缘检测。 理论介…

MySQL5.7升级到MySQL8.0的最佳实践分享

一、前言 事出必有因&#xff0c;在这个月的某个项目中&#xff0c;我们面临了一项重要任务&#xff0c;即每年一次的等保测评整改。这次测评的重点是Mysql的一些高危漏洞&#xff0c;客户要求我们无论如何必须解决这些漏洞。尽管我们感到无奈&#xff0c;但为了满足客户的要求…