微信小程序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.mzph.cn/news/690722.shtml

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

相关文章

正整数A+B(PTA团体天题练习题)细节题刨析

哎呀&#xff0c;又是看似简单的AB模型&#xff0c;这题确实也是AB&#xff0c;不过这个题让我debug1个多小时才找出来问题所在&#xff0c;服了&#xff0c;真是所谓细节决定成败&#xff0c;这题也挺值得记录下来的&#xff0c;话不多嗦&#xff0c;看题 题的目标很简单&…

RK3568平台开发系列讲解(Linux系统篇)内核中断机制

🚀返回专栏总目录 文章目录 一、注册中断处理程序二、下半部的概念2.1、Tasklet作为下半部2.2、工作队列作为下半部2.3、Softirq作为下半部沉淀、分享、成长,让自己和他人都能有所收获!😄 📢中断是设备中止内核的一种方法,告诉内核发生了有趣或重要的事情。这些在Linu…

docker环境常用容器安装

目录 1.安装partainer 2.安装myql 3.安装redis 4.安装Minio 5.安装zibkin 6.安装nacos 7.安装RabbitMq 8.安装RocketMq 8.1启动service 8.2修改对应配置 8.3启动broker 8.4启动控制台 9.安装sentinel 10.安装elasticsearch 11.安装Kibana 12.安装logstash/file…

《UE5_C++多人TPS完整教程》学习笔记14 ——《P15 创建我们自己的子系统(Creating Our Own Subsystem)》

本文为B站系列教学视频 《UE5_C多人TPS完整教程》 —— 《P15 创建我们自己的子系统&#xff08;Creating Our Own Subsystem&#xff09;》 的学习笔记&#xff0c;该系列教学视频为 Udemy 课程 《Unreal Engine 5 C Multiplayer Shooter》 的中文字幕翻译版&#xff0c;UP主&…

three.js 3D可视化地图

threejs地图 可视化地图——three.js实现 this.provinceInfo document.getElementById(provinceInfo); // 渲染器 this.renderer new THREE.WebGLRenderer({antialias: true }); this.renderer.setSize(window.innerWidth, window.innerHeight); this.container.appendChild…

Linux下如何配置环境变量

在Linux下配置环境变量通常有几种方法&#xff0c;具体取决于你希望将环境变量设置为全局还是仅对当前会话有效。以下是一些常见的方法&#xff1a; 永久性全局配置&#xff1a;要使环境变量在所有用户和会话中永久生效&#xff0c;可以编辑 /etc/environment 文件。在文件中添…

Open CASCADE学习|TopoDS_Vertex与gp_Pnt相互转化

目录 gp_Pnt TopoDS_Vertex 关系和转换 使用场景 在Open CASCADE Technology (OCCT)中&#xff0c;TopoDS_Vertex和gp_Pnt是两种不同的数据类型&#xff0c;用于表示三维空间中的点。它们有不同的用途和特性&#xff1a; gp_Pnt gp_Pnt是OCCT几何库&#xff08;Geom&…

php伪协议之phar

一.phar协议 用于将多个 PHP 文件、类、库、资源&#xff08;如图像、样式表&#xff09;等打包成一个单独的文件。这个归档文件可以像其他 PHP 文件一样被包含&#xff08;include&#xff09;或执行。PHAR 归档提供了一种方便的方式来分发和安装 PHP 应用程序和库&#xff0c…

今日Java小练习

题目描述一 计算保存日期的那一年的所有天数 解题思路 分别截取日期的年月日保存为int型定义数组保存1到12月的天数&#xff08;或使用LocalDate的getDayOfMonth方法直接计算&#xff09;判断如果是闰年二月天数加1累加当前月份前所有月份的天数和用之前累加的天数加上当前月的…

ClickHouse学习

ClickHouse是由C编写的列式存储数据库&#xff08;DBMS&#xff09;&#xff0c;主要用来在线分析处理查询&#xff08;OLTP&#xff09;&#xff0c;能够用Sql查询生成的实时数据分析报告。 适用场景 大多数是读请求 、数据总是批量写入 、不更新或少更新数据、每次都是读取大…

机器学习中为什么需要梯度下降

在机器学习中&#xff0c;梯度下降是一种常用的优化算法&#xff0c;用于寻找损失函数的最小值。我们可以用一个简单的爬山场景来类比梯度下降的过程。 假设你被困在山上&#xff0c;需要找到一条通往山下的路。由于你是第一次来到这座山&#xff0c;对地形不熟悉&#xff0c;你…

Python——元组

一、元组特性介绍 元组和列表⼀样&#xff0c;也是⼀种序列类型的数据。 唯⼀的不同是&#xff0c;元组是相对不可变的。 二、⾼效创建元组 In [1]: t1 () # 创建 空 元素的元组In [2]: type(t1) Out[2]: tuple有元素的元组实际上是使⽤英⽂的逗号创建的 In [3]:…

【sgCreateTableColumn】自定义小工具:敏捷开发→自动化生成表格列html代码(表格列生成工具)[基于el-table-column]

源码 <template><!-- 前往https://blog.csdn.net/qq_37860634/article/details/136126479 查看使用说明 --><div :class"$options.name"><div class"sg-head">表格列生成工具</div><div class"sg-container"…

RSA加密,解密,加签及验签

目录 1.说明 2.加密和加签的区别 3.后端加密&#xff0c;解密&#xff0c;加签及验签示例 4.前端加密&#xff0c;解密&#xff0c;加签及验签示例 5.前端加密&#xff0c;后端解密&#xff0c;前端加签&#xff0c;后端验签 6.注意事项 1.说明 RSA算法是一种非对称加密…

【JavaScript】输入输出语法

目录 一、输出语法 二、输入语法 一、输出语法 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>D…

Java解决石子游戏问题

Java解决石子游戏问题 01 题目 Alice 和 Bob 用几堆石子在做游戏。一共有偶数堆石子&#xff0c;排成一行&#xff1b;每堆都有 正 整数颗石子&#xff0c;数目为 piles[i] 。 游戏以谁手中的石子最多来决出胜负。石子的 总数 是 奇数 &#xff0c;所以没有平局。 Alice 和…

Netty学习------2024/02/19

non-blocking io 非阻塞 IO 1. 三大组件 1.1 Channel & Buffer channel 有一点类似于 stream&#xff0c;它就是读写数据的双向通道&#xff0c; 可以从 channel 将数据读入 buffer&#xff0c;也可以将 buffer 的数据写入 channel&#xff0c; 而之前的 stream 要么是输…

【Linux系列】超算作业调度系统批量取消作业介绍

在使用HPC跑模型时常常需要批量取消提交的job&#xff0c;本文将三种常见的作业调度系统的批量取消作业方法进行介绍&#xff0c;方便平时使用。 一、Slurm Slurm取消/删除作业的命令为scancel&#xff0c;其基本的使用方法有&#xff1a; 命令说明scancel < jobid >删…

HCIA-HarmonyOS设备开发认证V2.0-IOT硬件子系统-I2C

目录 一、 I2C 概述二、I2C 模块相关API三、接口调用实例四、I2C HDF驱动开发4.1、开发步骤(待续...) 坚持就有收获 一、 I2C 概述 I2C&#xff08;Inter Integrated Circuit&#xff09;集成电路间总线是由 Philips 公司开发的一种简单、双向二线制同步串行总线。I2C 以主从方…

面试题:链表相交

链表相交 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表没有交点&#xff0c;返回 null 。 图示两个链表在节点 c1 开始相交&#xff1a; 思路 这个题目有2个思路&#xff0c;我先说容易想到的思路 对齐链表…