uniapp 开发之仿抖音，上下滑动切换视频、点击小爱心效果

效果图：  

功能描述：

上下滑动视频，双击暂停，然后第一个视频再往上滑显示”已经滑到顶了“

开始代码：

首先视频接口使用的公开的视频测试接口

开放API-2.0  官网展示                      Swagger UI  接口文档

一开始编写如下： 

<template><view><!--swiper实现整屏划动播放视频--><swiper circular vertical duration="200" @transition="transition" @change="changed":style="{height: screenHeight-navBarHeight +'px'}"><block v-for="(item,index) in displaySwiperList" :key="index"><swiper-item><!-- v-if="index==changeIndex" 只渲染当前页的视频，能够有效解决数组不断追加后引起黑屏的问题 --><video v-if="index==changeIndex" :src="item.src" autoplay="true" controls="true"custom-cache="false" loop="false" enable-play-gesture="true" enable-progress-gesture="true"show-center-play-btn="true"></video><!-- 文本标题 --><view class="video-text"><view class="tips"> {{item.title}} </view></view></swiper-item></block></swiper></view>
</template><script>export default {data() {return {screenHeight: 0,statusBarHeight: 0,navBarHeight: 0,originList: [], // 源数据displaySwiperList: [], // swiper需要的数据displayIndex: 0, // 用于显示swiper的真正的下标数值只有：0，1，2。originIndex: 0, // 记录源数据的下标changeIndex: 0, //控制video是否渲染page: 0, // 视频分页num: 0,flag: true}},onLoad() {/* 获取系统信息 */wx.getSystemInfo({success: (res) => {// 获取屏幕高度this.screenHeight = res.screenHeight// 获取状态栏高度this.statusBarHeight = res.statusBarHeight// 通过操作系统 确定自定义导航栏高度  if (res.system.substring(0, 3) == "iOS") {this.navBarHeight = 42} else {this.navBarHeight = 40}}})// 调用函数this.getPageID()},methods: {/* 生成随机的 pageID */getPageID() {let pageID = parseInt(Math.random() * (0 - 100 + 1) + 100) //生成 [min,max] 的随机数this.getVideoList(pageID)},/* 获取视频数据 */getVideoList(pageID) {uni.request({url: 'https://api.apiopen.top/api/getMiniVideo?page=' + pageID +'&size=10&pageSize=10', // 请求数据接口data: {},success: (res) => {if (res.data.code == 200) {res.data.result.list.forEach(item => {//取源数据的部分属性组合成新的数组let obj = {}obj.src = item.playurlobj.title = item.titlethis.originList.push(obj)})}//解决首次加载页面的时候没有画面的问题if (this.flag) {this.flag = falsethis.initSwiperData(0)}}})},changed(event) {let {current} = event.detail;let originListLength = this.originList.length;this.changeIndex = current;// console.log(this.displayIndex,current)// 如果两者的差为2或者-1则是向后滑动if (this.displayIndex - current == 2 || this.displayIndex - current == -1) {this.originIndex = this.originIndex + 1 == originListLength ? 0 : this.originIndex + 1;this.displayIndex = this.displayIndex + 1 == 3 ? 0 : this.displayIndex + 1;this.initSwiperData(this.originIndex);//如果滑到最后一条，请求新数据this.num++console.log('num',this.num,this.originList.length)if (this.num + 5 >= this.originList.length) {this.getPageID()}}// 如果两者的差为-2或者1则是向前滑动else if (this.displayIndex - current == -2 || this.displayIndex - current == 1) {this.originIndex = this.originIndex - 1 == -1 ? originListLength - 1 : this.originIndex - 1;this.displayIndex = this.displayIndex - 1 == -1 ? 2 : this.displayIndex - 1;this.initSwiperData(this.originIndex);if (this.num > 0) {this.num--}}},initSwiperData(originIndex = this.originIndex) {// console.log(this.displayIndex,originIndex)// 0 0// 1 1// 2 2// 0 3// 1 4//源数据长度let originListLength = this.originList.length;let displayList = [];displayList[this.displayIndex] = this.originList[originIndex];displayList[this.displayIndex - 1 == -1 ? 2 : this.displayIndex - 1] = this.originList[originIndex - 1 == -1 ? originListLength - 1 : originIndex - 1];displayList[this.displayIndex + 1 == 3 ? 0 : this.displayIndex + 1] = this.originList[originIndex + 1 ==originListLength ? 0 : originIndex + 1];// console.log(originIndex, (originIndex - 1 == -1 ? originListLength - 1 : originIndex - 1), (originIndex +// 	1 == originListLength ? 0 : originIndex + 1))// 0 9 1// 1 0 2// 2 1 3// 3 2 4// 4 3 5//刷新数据this.displaySwiperList = displayList;// console.log(this.displaySwiperList,this.originList)},}}
</script><style>swiper {width: 100%;background: #000}swiper-item {height: 100%;width: 100%}video {height: 96%;width: 100%}.video-text {position: absolute;margin-left: 32rpx;width: 580rpx;bottom: 200rpx;z-index: 9999;}.tips {width: 560rpx;font-size: 26rpx;color: #ffffff;}
</style>

注解：

  • autoplay="true"：设置视频在加载完成后自动播放。
  • controls="true"：显示视频的控制面板，包括播放/暂停按钮、音量控制、进度条和全屏按钮等。
  • custom-cache="false"：禁用视频的自定义缓存，在每次播放时都重新加载视频。
  • loop="false"：设置视频不循环播放，当播放完成后停止。
  • enable-play-gesture="true"：启用手势控制，允许通过手势来播放/暂停视频。
  • enable-progress-gesture="true"：启用手势控制，允许通过手势来调整视频播放的进度。
  • show-center-play-btn="true"：显示一个居中的播放按钮，当视频处于暂停状态时，点击按钮可以播放视频。

进一步希望能够实现上滑到第一个视频之后，关闭循环 无法再上滑

<swiper :circular="!canCircular" >
</swiper>computed: {canCircular() {console.log(Boolean((this.originIndex + 1 == this.originList.length ? 0 : this.originIndex + 1) == 1))return (this.originIndex + 1 == this.originList.length ? 0 : this.originIndex + 1) == 1; }
}

第一个视频再上滑 弹出提示框

<swiper @transition="transition">
</swiper>transition(e) {// console.log(e)let originListLength = this.originList.length;if ((this.originIndex + 1 == originListLength ? 0 : this.originIndex + 1) == 1 && e.detail.dy < -100) {uni.showToast({title: '已经到顶了',icon: 'none'})}
}

注解：

swiper-item 的位置发生改变时会触发 transition 事件，通过判断是否为第一个视频 && 进行了上滑行为 来控制弹出”已经到顶的提示“

完整代码：

<template><view><!--swiper实现整屏划动播放视频--><swiper :circular="!canCircular" vertical duration="200" @transition="transition" @change="changed":style="{height: screenHeight-navBarHeight +'px'}"><block v-for="(item,index) in displaySwiperList" :key="index"><swiper-item><!-- v-if="index==changeIndex" 只渲染当前页的视频，能够有效解决数组不断追加后引起黑屏的问题 --><video v-if="index==changeIndex" :src="item.src" autoplay="true" controls="true"custom-cache="false" loop="false" enable-play-gesture="true" enable-progress-gesture="true"show-center-play-btn="true"></video><!-- 文本标题 --><view class="video-text"><view class="tips"> {{item.title}} </view></view></swiper-item></block></swiper></view>
</template><script>export default {data() {return {screenHeight: 0,statusBarHeight: 0,navBarHeight: 0,originList: [], // 源数据displaySwiperList: [], // swiper需要的数据displayIndex: 0, // 用于显示swiper的真正的下标数值只有：0，1，2。originIndex: 0, // 记录源数据的下标changeIndex: 0, //控制video是否渲染page: 0, // 视频分页num: 0,flag: true}},computed: {canCircular() {console.log(Boolean((this.originIndex + 1 == this.originList.length ? 0 : this.originIndex + 1) == 1))return (this.originIndex + 1 == this.originList.length ? 0 : this.originIndex + 1) == 1; }},onLoad() {/* 获取系统信息 */wx.getSystemInfo({success: (res) => {// 获取屏幕高度this.screenHeight = res.screenHeight// 获取状态栏高度this.statusBarHeight = res.statusBarHeight// 通过操作系统 确定自定义导航栏高度  if (res.system.substring(0, 3) == "iOS") {this.navBarHeight = 42} else {this.navBarHeight = 40}}})// 调用函数this.getPageID()},methods: {transition(e) {// console.log(e)let originListLength = this.originList.length;if ((this.originIndex + 1 == originListLength ? 0 : this.originIndex + 1) == 1 && e.detail.dy < -100) {uni.showToast({title: '已经到顶了',icon: 'none'})}},/* 生成随机的 pageID */getPageID() {let pageID = parseInt(Math.random() * (0 - 100 + 1) + 100) //生成 [min,max] 的随机数this.getVideoList(pageID)},/* 获取视频数据 */getVideoList(pageID) {uni.request({url: 'https://api.apiopen.top/api/getMiniVideo?page=' + pageID +'&size=10&pageSize=10', // 请求数据接口data: {},success: (res) => {if (res.data.code == 200) {res.data.result.list.forEach(item => {//取源数据的部分属性组合成新的数组let obj = {}obj.src = item.playurlobj.title = item.titlethis.originList.push(obj)})}//解决首次加载页面的时候没有画面的问题if (this.flag) {this.flag = falsethis.initSwiperData(0)}}})},changed(event) {let {current} = event.detail;let originListLength = this.originList.length;this.changeIndex = current;// console.log(this.displayIndex,current)// 如果两者的差为2或者-1则是向后滑动if (this.displayIndex - current == 2 || this.displayIndex - current == -1) {this.originIndex = this.originIndex + 1 == originListLength ? 0 : this.originIndex + 1;this.displayIndex = this.displayIndex + 1 == 3 ? 0 : this.displayIndex + 1;this.initSwiperData(this.originIndex);//如果滑到最后一条，请求新数据this.num++console.log('num',this.num,this.originList.length)if (this.num + 5 >= this.originList.length) {this.getPageID()}}// 如果两者的差为-2或者1则是向前滑动else if (this.displayIndex - current == -2 || this.displayIndex - current == 1) {this.originIndex = this.originIndex - 1 == -1 ? originListLength - 1 : this.originIndex - 1;this.displayIndex = this.displayIndex - 1 == -1 ? 2 : this.displayIndex - 1;this.initSwiperData(this.originIndex);if (this.num > 0) {this.num--}}},initSwiperData(originIndex = this.originIndex) {// console.log(this.displayIndex,originIndex)// 0 0// 1 1// 2 2// 0 3// 1 4//源数据长度let originListLength = this.originList.length;let displayList = [];displayList[this.displayIndex] = this.originList[originIndex];displayList[this.displayIndex - 1 == -1 ? 2 : this.displayIndex - 1] = this.originList[originIndex - 1 == -1 ? originListLength - 1 : originIndex - 1];displayList[this.displayIndex + 1 == 3 ? 0 : this.displayIndex + 1] = this.originList[originIndex + 1 ==originListLength ? 0 : originIndex + 1];// console.log(originIndex, (originIndex - 1 == -1 ? originListLength - 1 : originIndex - 1), (originIndex +// 	1 == originListLength ? 0 : originIndex + 1))// 0 9 1// 1 0 2// 2 1 3// 3 2 4// 4 3 5//刷新数据this.displaySwiperList = displayList;// console.log(this.displaySwiperList,this.originList)},}}
</script><style>swiper {width: 100%;background: #000}swiper-item {height: 100%;width: 100%}video {height: 96%;width: 100%}.video-text {position: absolute;margin-left: 32rpx;width: 580rpx;bottom: 200rpx;z-index: 9999;}.tips {width: 560rpx;font-size: 26rpx;color: #ffffff;}
</style>

小爱心效果 

<!DOCTYPE html>
<html><head><title>点赞特效</title><style>body {margin: 0;padding: 0;overflow: hidden;}#heart {position: absolute;top: 50%;left: 50%;width: 100px;height: 100px;border-radius: 50%;background: red;transform: translate(-50%, -50%);animation: heartBeat 1s linear infinite;}@keyframes heartBeat {0% {transform: scale(1);}50% {transform: scale(1.2);}100% {transform: scale(1);}}</style>
</head><body><script src="https://cdn.jsdelivr.net/npm/jquery"></script><script>$(document).ready(function () {var hearts = ["❤️", "💛", "💙", "💚", "💜", "🧡"];$(document).click(function (e) {var x = e.pageX;var y = e.pageY;var heartIcon = $("<div>").addClass("heart").text(hearts[Math.floor(Math.random() * hearts.length)]);$(heartIcon).css({position: "absolute",top: y - 10,left: x - 10,color: "red",userSelect: "none",pointerEvents: "none"});$("body").append($(heartIcon));// 1000 是动画的持续时间$(heartIcon).animate({top: y - 100,opacity: 0}, 1000, function () {$(heartIcon).remove();});});});</script>
</body></html>

效果图：

也可以将其换成爱心图片：

<!DOCTYPE html>
<html><head><title>点赞特效</title><style>body {margin: 0;padding: 0;overflow: hidden;}#heart {position: absolute;top: 50%;left: 50%;width: 100px;height: 100px;border-radius: 50%;background: red;transform: translate(-50%, -50%);animation: heartBeat 1s linear infinite;}@keyframes heartBeat {0% {transform: scale(1);}50% {transform: scale(1.2);}100% {transform: scale(1);}}</style>
</head><body><script src="https://cdn.jsdelivr.net/npm/jquery"></script><script>$(document).ready(function () {var hearts = ["❤️", "💛", "💙", "💚", "💜", "🧡"];$(document).click(function (e) {var x = e.pageX;var y = e.pageY;// var heartIcon = $("<div>").addClass("heart").text(hearts[Math.floor(Math.random() * hearts.length)]);var heartIcon = $("<img>").addClass("heart").attr("src", "./hh.png")$(heartIcon).css({position: "absolute",top: y - 10,left: x - 10,color: "red",wight:"40px",height:"40px",userSelect: "none",pointerEvents: "none"});$("body").append($(heartIcon));// 1000 是动画的持续时间$(heartIcon).animate({top: y - 100,opacity: 0}, 1000, function () {$(heartIcon).remove();});});});</script>
</body></html>

效果图：

 

 

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

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

相关文章

Django基础7——用户认证系统、Session管理、CSRF安全防护机制

Django基础7——用户认证系统、Session管理、CSRF安全防护机制

文章目录 一、用户认证系统二、案例&#xff1a;登陆认证2.1 平台登入2.2 平台登出2.3 login_required装饰器 三、Django Session管理3.1 Django使用Session3.1.1 Cookie用法3.1.2 Session用法 3.2 案例&#xff1a;用户登录认证 四、Django CSRF安全防护机制 一、用户认证系统…
阅读更多...
4399面试总结C/C++游戏开发

4399面试总结C/C++游戏开发

主要流程 首先询问了C/C知识点 然后询问操作系统&#xff0c;计算机组成&#xff0c;数据结构&#xff0c;计算机网络哪两门熟悉 涉及的相关问题 多态的概念 tcp,udp&#xff1f; tcp,udp区别 tcp可靠&#xff0c;udp不可靠 tcp这个链接的过程? 一个TCP连接必须要经过三次“…
阅读更多...
提升代码逻辑的感觉——python循环语句

提升代码逻辑的感觉——python循环语句

提升代码逻辑的感觉——python循环语句 简介 循环是编程中的一个非常重要的概念&#xff0c;它用于处理重复性任何和迭代草错&#xff0c;通过循环我们能优化并简化代码&#xff0c;提高代码的可维护性&#xff0c;在Python中循环是一种控制结构&#xff0c;允许我们重复执行…
阅读更多...
【100天精通python】Day47：python网络编程_Web编程基础

【100天精通python】Day47：python网络编程_Web编程基础

目录 1 网络编程与web编程 1.1 网络编程 1.2 web编程 2 Web开发概述 3 Web开发基础 3.1 HTTP协议 3.2 Web服务器 3.3 前端基础 3.4 静态服务器 3.5 前后端交互的基本原理 4 WSGI接口 4.1 CGI 简介 4.2 WSGI 简介 4.3 定义 WSGI 接口 4.4 运行 WSGI 服务 4.5…
阅读更多...
视频汇聚/视频云存储/视频监控管理平台EasyCVR视频平台添加萤火云设备的具体操作步骤

视频汇聚/视频云存储/视频监控管理平台EasyCVR视频平台添加萤火云设备的具体操作步骤

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安…
阅读更多...
【ARM Coresight 系列文章 20 -- linux perf 与 ARM coresight】

【ARM Coresight 系列文章 20 -- linux perf 与 ARM coresight】

文章目录 1.1 Perf Introduction1.1.1 Perf 架构图1.1.2 Perf Tools 介绍1.1.3 Perf 命令介绍1.2 Events1.2.1 Perf 与 PMU 的关系1.2.2 Hardware events1.2.1.1 linux perf 事件分类1.2.2 Software Events1.2.3 Tracepoint Events1.3 Perf 工具使用1.4 用户态开发1.4.1 用户态…
阅读更多...
Springboot 整合 Redis配置

Springboot 整合 Redis配置

RedisService接口 import java.util.List; import java.util.Map; import java.util.Set;/*** Redis操作Service* Created by macro on 2020/3/3.*/ public interface RedisService {/*** 保存属性*/void set(String key, Object value, long time);/*** 保存属性*/void set(St…
阅读更多...
Java项目-苍穹外卖-Day07-redis缓存应用-SpringCache/购物车功能

Java项目-苍穹外卖-Day07-redis缓存应用-SpringCache/购物车功能

文章目录 前言缓存菜品问题分析和实现思路缓存菜品数据清理缓存数据功能测试 SpringCache介绍入门案例 缓存套餐购物车功能添加购物车需求分析和产品原型测试 前言 本章节主要是进行用户端的购物车功能开发 和redis作为mysql缓存的应用以及SpringCache的介绍 因为很多人查询数…
阅读更多...
VSCode-C++环境配置+Cmake

VSCode-C++环境配置+Cmake

文章目录 一、环境配置二、Win10 Cmake 一、环境配置 转载链接 二、Win10 Cmake 创建CMakeLists.txt cmake_minimum_required(VERSION 3.26) project(graph_algorithm)set(CMAKE_CXX_STANDARD 17)add_executable(main main.cppshared_variable.cpp )cmake . -G "MinGW…
阅读更多...
【Java List与Map】List＜T＞ Map与Map List＜T＞的区别（126）

【Java List与Map】List＜T＞ Map与Map List＜T＞的区别（126）

List&#xff1c;T&#xff1e; Map&#xff1a;List里面的数据类型包含Map&#xff1b; Map List&#xff1c;T&#xff1e;&#xff1a;Map里面value的数据类型包含List&#xff1b; 测试案例&#xff1a; import java.util.ArrayList; import java.util.HashMap; import j…
阅读更多...
安全区域边界技术测评要求项

安全区域边界技术测评要求项

1.边界防护-非授权设备接入、非授权连接外部网络、无线网络使用和设备可信接入 &#xff08;网络边界就是采用不同安全策略的两个网络的连接处&#xff09; 1-1/2-1/3-4/4-6 a&#xff09;保证跨越边界的访问和数据流通过边界设备提供的受控接口进行通信 b&#xff09;应能够对…
阅读更多...
Linux学习之RAID

Linux学习之RAID

基础概念 RAID&#xff0c;英文全称为Redundant Arrays of Independent Drives&#xff0c;RAID&#xff0c;中文称为独立冗余磁盘阵列&#xff0c;这项技术把多个硬盘设备组合成一个容量更大的、安全性更好的磁盘阵列&#xff0c;把数据切割成许多区段分别放在不同的物理磁盘…
阅读更多...
MATLAB算法实战应用案例精讲-【概念篇】构建数据指标方法(最终篇)

MATLAB算法实战应用案例精讲-【概念篇】构建数据指标方法(最终篇)

目录 前言 算法原理 指标体系的意义 1. 更好进行管理 2. 更优打造业务 3. 更早构造壁垒 什么是好的
阅读更多...
15. 实现业务功能--帖子操作

15. 实现业务功能--帖子操作

1. 集成编译器 editor.md 支持 MarkDown 语法编辑&#xff0c;在需要用户输⼊内容的页面按以下代码嵌入编辑器 1.1 编写 HTML <!-- 引⼊编辑器的CSS --> <link rel"stylesheet" href"./dist/editor.md/css/editormd.min.css"> <!-- 引⼊编…
阅读更多...
Linux服务器中创建SVN项目详细步骤

Linux服务器中创建SVN项目详细步骤

一、Linux服务器中的SVN安装和搭建项目环境可以参考一下文章: 1、《阿里云服务器搭建》------搭建SVN服务 2、在一个服务器的svn上&#xff0c;设置一个端口号对应一个项目 3、如何解决Linuxsvn无法显示日志的问题 二、Linux服务器中的SVN项目如何添加项目的忽略文件&#xff1…
阅读更多...
Rabbitmq的消息转换器

Rabbitmq的消息转换器

Spring会把你发送的消息序列化为字节发送给MQ&#xff0c;接收消息的时候&#xff0c;还会把字节反序列化为Java对象 ,只不过&#xff0c;默认情况下Spring采用的序列化方式是JDK序列化。众所周知&#xff0c;JDK序列化存在下列问题&#xff1a; 数据体积过大 有安全漏洞 可读…
阅读更多...
nacos Error to process server push response

nacos Error to process server push response

nacos2.0.3报错&#xff1a; Error to process server push response 解决办法&#xff1a; 排查项目当中有没有直接或间接依赖reflections&#xff1a; <dependency><groupId>org.reflections</groupId><artifactId>reflections</artifactId>…
阅读更多...
华为配置聚合vlan（Super vlan--Sub vlan）

华为配置聚合vlan（Super vlan--Sub vlan）

聚合vlan&#xff0c;Aggregation vlan&#xff0c;也称Super vlan&#xff0c;可以实现用Sub vlan二层隔离广播域&#xff0c;但又将这些Sub vlan聚合使用同一IP子网和网关的情况。 这样&#xff0c;多个Sub-VLAN共享一个网关地址&#xff0c;节约了子网号、子网定向广播地址、…
阅读更多...
部署问题集合（二十一）从零开始搭建一台NAS服务器（Linux虚拟机）

部署问题集合（二十一）从零开始搭建一台NAS服务器（Linux虚拟机）

前言 因工作需要&#xff0c;需要从零通过虚拟机搭建一台NAS服务器&#xff0c;以此记录下来 步骤 1、创建虚拟机 通过VMWare创建一台新虚拟机&#xff0c;虚拟机内存和磁盘自定义&#xff0c;不过建议尽量大一点 2、服务器端配置 查看是否安装有NFS服务&#xff1a;rpm …
阅读更多...
TensorFlow-slim包进行图像数据集分类---具体流程

TensorFlow-slim包进行图像数据集分类---具体流程

TensorFlow中slim包的具体用法 1、训练脚本文件&#xff08;该文件包含数据下载打包、模型训练&#xff0c;模型评估流程&#xff09;3、模型训练1、数据集相关模块&#xff1a;2、设置网络模型模块3、数据预处理模块4、定义损失loss5、定义优化器模块 本次使用的TensorFlow版本…
阅读更多...
最新文章

Copyright @ 2022~2023