国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

<rp id="ogthd"><strong id="ogthd"></strong></rp>

<rp id="ogthd"></rp>

uniapp 開發(fā)之仿抖音，上下滑動(dòng)切換視頻、點(diǎn)擊小愛心效果

2年前作者：阿晨12138分類：Toy博客閱讀(100)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了uniapp 開發(fā)之仿抖音，上下滑動(dòng)切換視頻、點(diǎn)擊小愛心效果。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

效果圖：??

uniapp 開發(fā)之仿抖音，上下滑動(dòng)切換視頻、點(diǎn)擊小愛心效果,Javascript與ES6~,vue2,uniapp全棧,uni-app,前端,視頻

功能描述：

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

開始代碼：

首先視頻接口使用的公開的視頻測(cè)試接口

開放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)前頁(yè)的視頻，能夠有效解決數(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, // 視頻分頁(yè)
				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', // 請(qǐng)求數(shù)據(jù)接口
					data: {},
					success: (res) => {
						if (res.data.code == 200) {
							res.data.result.list.forEach(item => {
								//取源數(shù)據(jù)的部分屬性組合成新的數(shù)組
								let obj = {}
								obj.src = item.playurl
								obj.title = item.title
 
								this.originList.push(obj)
							})
						}
						//解決首次加載頁(yè)面的時(shí)候沒有畫面的問題
						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則是向后滑動(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);
					//如果滑到最后一條，請(qǐng)求新數(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ù)長(zhǎng)度
				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"：?jiǎn)⒂檬謩?shì)控制，允許通過手勢(shì)來播放/暫停視頻。
enable-progress-gesture="true"：?jiǎn)⒂檬謩?shì)控制，允許通過手勢(shì)來調(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í)會(huì)觸發(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)前頁(yè)的視頻，能夠有效解決數(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, // 視頻分頁(yè)
				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', // 請(qǐng)求數(shù)據(jù)接口
					data: {},
					success: (res) => {
						if (res.data.code == 200) {
							res.data.result.list.forEach(item => {
								//取源數(shù)據(jù)的部分屬性組合成新的數(shù)組
								let obj = {}
								obj.src = item.playurl
								obj.title = item.title

								this.originList.push(obj)
							})
						}
						//解決首次加載頁(yè)面的時(shí)候沒有畫面的問題
						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則是向后滑動(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);
					//如果滑到最后一條，請(qǐng)求新數(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ù)長(zhǎng)度
				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>

效果圖：

uniapp 開發(fā)之仿抖音，上下滑動(dòng)切換視頻、點(diǎn)擊小愛心效果,Javascript與ES6~,vue2,uniapp全棧,uni-app,前端,視頻

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

<!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>

效果圖：

uniapp 開發(fā)之仿抖音，上下滑動(dòng)切換視頻、點(diǎn)擊小愛心效果,Javascript與ES6~,vue2,uniapp全棧,uni-app,前端,視頻 ?

?文章來源地址http://www.zghlxwxcb.cn/news/detail-706422.html

到了這里，關(guān)于uniapp 開發(fā)之仿抖音，上下滑動(dòng)切換視頻、點(diǎn)擊小愛心效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

uniapp中swiper的大坑，在swiper-item中嵌套video在移動(dòng)端無法實(shí)現(xiàn)上下滑動(dòng)的，要用nvue代替，從而實(shí)現(xiàn)抖音滑視頻效果
想做一個(gè)抖音滑屏切換視頻的效果，結(jié)果。。。。。研究了一天，發(fā)現(xiàn)在swiper-item中嵌套視頻時(shí)，移動(dòng)端只能滑動(dòng)切換背景，視頻在原位置是不會(huì)動(dòng)的。。。。但是在h5端和小程序端可以完美運(yùn)行，這就很讓人生氣了： ?在移動(dòng)端的時(shí)候，就會(huì)出現(xiàn)雖然切換到第二個(gè)視頻了，
2023年04月09日
瀏覽(98)
仿抖音短視頻小程序APP組件（超高性能）自動(dòng)預(yù)加載-uniapp
注：組件使用 vue3+typescript 開發(fā) 全局僅渲染 3 個(gè) swiper-item 實(shí)測(cè)，不管加載多少數(shù)據(jù)也能絲滑滾動(dòng) 適用于 vue3，vue2 請(qǐng)自行修自動(dòng)預(yù)加載視頻首次渲染優(yōu)化安裝 nodejs: https://nodejs.org/en/ 安裝依賴: npm i 運(yùn)行項(xiàng)目: npm run dev:mp-weixin 構(gòu)建項(xiàng)目資源: npm run build:mp-weixin 打開小程序開發(fā)
2024年02月09日
瀏覽(371)
HarmonyOS 實(shí)戰(zhàn)開發(fā)案例-仿抖音短視頻應(yīng)用
前段時(shí)間看到一篇文章，但是沒有源碼，是一個(gè)仿寫抖音的文章，最近也在看這塊，順便寫個(gè)簡(jiǎn)單的短視頻小應(yīng)用。技術(shù)點(diǎn)拆分 1、http請(qǐng)求數(shù)據(jù)； 2、measure計(jì)算文本寬度； 3、video播放視頻； 4、onTouch上滑/下拉切換視頻； 5、List實(shí)現(xiàn)滾動(dòng)加載；效果展示 http請(qǐng)求數(shù)據(jù) 通過對(duì)
2024年02月22日
瀏覽(103)
從零搭建仿抖音短視頻APP-后端開發(fā)短視頻業(yè)務(wù)模塊（1）
項(xiàng)目持續(xù)更新中：仿抖音短視頻APP專欄目錄發(fā)布短視頻的流程梳理傳統(tǒng)上傳流程? 傳統(tǒng)上傳 CDN上傳 CDN上傳流程使用Unicloud云端功能 ?實(shí)現(xiàn)app端視頻上傳保存視頻信息入庫(kù) 注：controller接受到文件之后會(huì)把文件上傳到服務(wù)器，同時(shí)controller獲得某一幀幀來獲得我們的封面圖，
2023年04月12日
瀏覽(96)
從零開始搭建仿抖音短視頻APP-后端開發(fā)消息業(yè)務(wù)模塊（1）
項(xiàng)目持續(xù)更新中：仿抖音短視頻APP專欄目錄保存系統(tǒng)消息到MongoDB 系統(tǒng)消息入庫(kù)保存-關(guān)注系統(tǒng)消息入庫(kù)保存-點(diǎn)贊短視頻系統(tǒng)消息入庫(kù)保存-評(píng)論與回復(fù) 我們把mongoDB整合到Springboot之后，我們需要把映射層面做好。首先在model創(chuàng)建一個(gè)新的對(duì)象層面，也就是一個(gè)新的包：我
2024年02月01日
瀏覽(94)
uniapp ----小程序上下滑動(dòng)頁(yè)面，視頻自動(dòng)播放（完整代碼）
2024年02月16日
瀏覽(17)
uniapp實(shí)現(xiàn)視頻上下滑動(dòng)功能（小程序）以及video組件的暫停和播放
uni推薦使用swiper組件實(shí)現(xiàn)，在video組件的下面介紹有寫。這里實(shí)現(xiàn)方式是：父組件先用swiper組件實(shí)現(xiàn)縱向滑動(dòng)，然后在每個(gè)swiper-item中插入視屏組件video-item-vx（自己定義的組件），在video-item-vx組件中實(shí)現(xiàn)視屏播放，具體別的細(xì)節(jié)根據(jù)需要自己實(shí)現(xiàn)。注意：不能無限添加swi
2023年04月22日
瀏覽(86)
利用uniapp中模仿抖音、滑動(dòng)視頻組件、首個(gè)視頻自動(dòng)播放、預(yù)加載、實(shí)現(xiàn)加載更多，超高性能
抖音效果圖本內(nèi)容主要實(shí)現(xiàn)了滑動(dòng)視頻組件、首個(gè)視頻自動(dòng)播放、預(yù)加載、實(shí)現(xiàn)加載更多，超高性能，前言：最近在做短劇，于是就在網(wǎng)上找了很多不錯(cuò)的例子，但是不是很完美，基本上都比較卡頓，我也是在站在巨人的肩膀上優(yōu)化了一下。本片主要基于vue3、setup和ts開發(fā)的
2024年02月04日
瀏覽(114)
uniapp h5 豎向的swiper內(nèi)嵌視頻實(shí)現(xiàn)抖音短視頻垂直切換，絲滑切換視頻效果，無限數(shù)據(jù)加載不卡頓
一、項(xiàng)目背景：實(shí)現(xiàn)仿抖音短視頻全屏視頻播放、點(diǎn)贊、評(píng)論、上下切換視頻、視頻播放暫停、分頁(yè)加載、上拉加載下一頁(yè)、下拉加載上一頁(yè)等功能。。。二、前言：博主一開始一直想實(shí)現(xiàn)類似抖音進(jìn)入頁(yè)面自動(dòng)播放當(dāng)前視頻，上下滑動(dòng)切換之后播放當(dāng)前視頻，但最后在
2024年02月11日
瀏覽(19)
uniapp 微信小程序仿抖音評(píng)論區(qū)功能，支持展開收起
最近需要寫一個(gè)評(píng)論區(qū)功能，所以打算仿照抖音做一個(gè)評(píng)論功能，支持展開和收起，首先我們需要對(duì)功能做一個(gè)拆解，評(píng)論區(qū)功能，兩個(gè)模塊，一個(gè)是發(fā)表評(píng)論模塊，一個(gè)是評(píng)論展示區(qū)。接下來對(duì)這兩個(gè)模塊進(jìn)行詳細(xì)描述。使用到的技術(shù) uniapp? uview2.0? ?文章最后我會(huì)貼上全
2024年02月10日
瀏覽(264)

<u id="7ocf4"><form id="7ocf4"></form></u>