效果圖：??

功能描述：

上下滑動(dòng)視頻，雙擊暫停，然后第一個(gè)視頻再往上滑顯示”已經(jīng)滑到頂了“

開始代碼：

首先視頻接口使用的公開的視頻測試接口

開放API-2.0? 官網(wǎng)展示? ? ? ? ? ? ? ? ? ? ??Swagger UI? 接口文檔

一開始編寫如下：?

<template><view><!--swiper實(shí)現(xiàn)整屏劃動(dòng)播放視頻--><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" 只渲染當(dāng)前頁的視頻，能夠有效解決數(shù)組不斷追加后引起黑屏的問題 --><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><!-- 文本標(biāo)題 --><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: [], // 源數(shù)據(jù)displaySwiperList: [], // swiper需要的數(shù)據(jù)displayIndex: 0, // 用于顯示swiper的真正的下標(biāo)數(shù)值只有：0，1，2。originIndex: 0, // 記錄源數(shù)據(jù)的下標(biāo)changeIndex: 0, //控制video是否渲染page: 0, // 視頻分頁num: 0,flag: true}},onLoad() {/* 獲取系統(tǒng)信息 */wx.getSystemInfo({success: (res) => {// 獲取屏幕高度this.screenHeight = res.screenHeight// 獲取狀態(tài)欄高度this.statusBarHeight = res.statusBarHeight// 通過操作系統(tǒng) 確定自定義導(dǎo)航欄高度  if (res.system.substring(0, 3) == "iOS") {this.navBarHeight = 42} else {this.navBarHeight = 40}}})// 調(diào)用函數(shù)this.getPageID()},methods: {/* 生成隨機(jī)的 pageID */getPageID() {let pageID = parseInt(Math.random() * (0 - 100 + 1) + 100) //生成 [min,max] 的隨機(jī)數(shù)this.getVideoList(pageID)},/* 獲取視頻數(shù)據(jù) */getVideoList(pageID) {uni.request({url: 'https://api.apiopen.top/api/getMiniVideo?page=' + pageID +'&size=10&pageSize=10', // 請求數(shù)據(jù)接口data: {},success: (res) => {if (res.data.code == 200) {res.data.result.list.forEach(item => {//取源數(shù)據(jù)的部分屬性組合成新的數(shù)組let obj = {}obj.src = item.playurlobj.title = item.titlethis.originList.push(obj)})}//解決首次加載頁面的時(shí)候沒有畫面的問題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則是向后滑動(dòng)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);//如果滑到最后一條，請求新數(shù)據(jù)this.num++console.log('num',this.num,this.originList.length)if (this.num + 5 >= this.originList.length) {this.getPageID()}}// 如果兩者的差為-2或者1則是向前滑動(dòng)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//源數(shù)據(jù)長度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//刷新數(shù)據(jù)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"：設(shè)置視頻在加載完成后自動(dòng)播放。
• controls="true"：顯示視頻的控制面板，包括播放/暫停按鈕、音量控制、進(jìn)度條和全屏按鈕等。
• custom-cache="false"：禁用視頻的自定義緩存，在每次播放時(shí)都重新加載視頻。
• loop="false"：設(shè)置視頻不循環(huán)播放，當(dāng)播放完成后停止。
• enable-play-gesture="true"：啟用手勢控制，允許通過手勢來播放/暫停視頻。
• enable-progress-gesture="true"：啟用手勢控制，允許通過手勢來調(diào)整視頻播放的進(jìn)度。
• show-center-play-btn="true"：顯示一個(gè)居中的播放按鈕，當(dāng)視頻處于暫停狀態(tài)時(shí)，點(diǎn)擊按鈕可以播放視頻。

進(jìn)一步希望能夠?qū)崿F(xiàn)上滑到第一個(gè)視頻之后，關(guān)閉循環(huán) 無法再上滑

<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; }
}

第一個(gè)視頻再上滑 彈出提示框

<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: '已經(jīng)到頂了',icon: 'none'})}
}

注解：

swiper-item 的位置發(fā)生改變時(shí)會觸發(fā) transition 事件，通過判斷是否為第一個(gè)視頻 && 進(jìn)行了上滑行為 來控制彈出”已經(jīng)到頂?shù)奶崾尽?/p>

完整代碼：

<template><view><!--swiper實(shí)現(xiàn)整屏劃動(dòng)播放視頻--><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" 只渲染當(dāng)前頁的視頻，能夠有效解決數(shù)組不斷追加后引起黑屏的問題 --><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><!-- 文本標(biāo)題 --><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: [], // 源數(shù)據(jù)displaySwiperList: [], // swiper需要的數(shù)據(jù)displayIndex: 0, // 用于顯示swiper的真正的下標(biāo)數(shù)值只有：0，1，2。originIndex: 0, // 記錄源數(shù)據(jù)的下標(biāo)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() {/* 獲取系統(tǒng)信息 */wx.getSystemInfo({success: (res) => {// 獲取屏幕高度this.screenHeight = res.screenHeight// 獲取狀態(tài)欄高度this.statusBarHeight = res.statusBarHeight// 通過操作系統(tǒng) 確定自定義導(dǎo)航欄高度  if (res.system.substring(0, 3) == "iOS") {this.navBarHeight = 42} else {this.navBarHeight = 40}}})// 調(diào)用函數(shù)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: '已經(jīng)到頂了',icon: 'none'})}},/* 生成隨機(jī)的 pageID */getPageID() {let pageID = parseInt(Math.random() * (0 - 100 + 1) + 100) //生成 [min,max] 的隨機(jī)數(shù)this.getVideoList(pageID)},/* 獲取視頻數(shù)據(jù) */getVideoList(pageID) {uni.request({url: 'https://api.apiopen.top/api/getMiniVideo?page=' + pageID +'&size=10&pageSize=10', // 請求數(shù)據(jù)接口data: {},success: (res) => {if (res.data.code == 200) {res.data.result.list.forEach(item => {//取源數(shù)據(jù)的部分屬性組合成新的數(shù)組let obj = {}obj.src = item.playurlobj.title = item.titlethis.originList.push(obj)})}//解決首次加載頁面的時(shí)候沒有畫面的問題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則是向后滑動(dòng)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);//如果滑到最后一條，請求新數(shù)據(jù)this.num++console.log('num',this.num,this.originList.length)if (this.num + 5 >= this.originList.length) {this.getPageID()}}// 如果兩者的差為-2或者1則是向前滑動(dòng)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//源數(shù)據(jù)長度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//刷新數(shù)據(jù)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>點(diǎn)贊特效</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 是動(dòng)畫的持續(xù)時(shí)間$(heartIcon).animate({top: y - 100,opacity: 0}, 1000, function () {$(heartIcon).remove();});});});</script>
</body></html>

效果圖：

也可以將其換成愛心圖片：

<!DOCTYPE html>
<html><head><title>點(diǎn)贊特效</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 是動(dòng)畫的持續(xù)時(shí)間$(heartIcon).animate({top: y - 100,opacity: 0}, 1000, function () {$(heartIcon).remove();});});});</script>
</body></html>

效果圖：

?

?