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

效果图：  

功能描述：

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

开始代码：

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

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

一开始编写如下： 

注解：

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

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

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 事件，通过判断是否为第一个视频 && 进行了上滑行为 来控制弹出”已经到顶的提示“

完整代码：

小爱心效果 

效果图：

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

效果图：