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.playurl
								obj.title = item.title
 
								this.originList.push(obj)
							})
						}
						//解决首次加载页面的时候没有画面的问题
						if (this.flag) {
							this.flag = false
							this.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.playurl
								obj.title = item.title

								this.originList.push(obj)
							})
						}
						//解决首次加载页面的时候没有画面的问题
						if (this.flag) {
							this.flag = false
							this.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>

效果图：