效果图：
功能描述：
上下滑动视频，双击暂停，然后第一个视频再往上滑显示"已经滑到顶了"
开始代码：
首先视频接口使用的公开的视频测试接口
开放API-2.0 官网展示 Swagger UI 接口文档
一开始编写如下：
html
<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"：显示一个居中的播放按钮，当视频处于暂停状态时，点击按钮可以播放视频。
进一步希望能够实现上滑到第一个视频之后，关闭循环 无法再上滑
javascript
<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;
}
}第一个视频再上滑 弹出提示框
javascript
<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 事件，通过判断是否为第一个视频 && 进行了上滑行为 来控制弹出"已经到顶的提示"
完整代码：
html
<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>小爱心效果
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)]);
$(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>效果图：
也可以将其换成爱心图片：
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>效果图：
