devbox
喵喵爱编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uniapp使用nvue三item写仿抖音短视频_uni-app模仿抖音

作者：喵喵爱编程 | 2024-08-22 09:37:09

赞

踩

uni-app模仿抖音

实机效果


首先，代码最主要的思路先说明一下：

        1.本身uniapp的渲染能力并不高，即时用上nvue也不能做到完美，所以我选择只渲染三个video，不过代码方面也还可以优化，这只是我简单的一个demo和思路提供，列如滑动暂停，或者视频先用封面处理。

        2.三个item就需要每次滑动都判断是到底是上还是下。

        3.再滑动到特定的index时需要不同的处理，需要在滑动时提前做好下一个的处理，比如在上滑到第二个播放器时，需要对三个播放器进行处理了。

先创建nvue项目，这边也就不多说了：

先在nvue页面创建一个swiper组件用for循环三个item里嵌套video，使用cover-view和cover-image来使层级在video之上

  1. <template>
  2. 	<view style="height: 100vh;flex:1;width:750rpx">
  3. 		<swiper @animationfinish="qiehuan" :current="activeIndex" @change="swiper" :circular="index==0?true:false" vertical
  4. 			class="list">
  5. 			<swiper-item disable-programmatic-animation class="item" v-for="(item,index) in list" :key="index">
  6. 				<video @ended="end" @pause='item.active=false' @click="pause(item,index)"
  7. 					@timeupdate="long($event,item,index)" :id="'Video'+index" class="video"
  8. 					:show-center-play-btn='false' :controls="false"
  9. 					src="https://media.w3.org/2010/05/sintel/trailer.mp4">
  10. 					<cover-view style="margin-top: 50rpx">
  11. 						<text style="color: aqua;">{{item.id}}</text></cover-view>
  12. 					<cover-view class="back" v-if="!item.active">
  13. 						<cover-image class="pauseIcon" src="../../static/icon/pause.png"></cover-image>
  14. 					</cover-view>
  15. 					<cover-view class="iconList">
  16. 						<cover-view class="iconListClass">
  17. 							<cover-image class="icon" src="../../static/icon/like.png"></cover-image>
  18. 							<cover-view>
  19. 								<text class="context">12.5w</text>
  20. 							</cover-view>
  21. 						</cover-view>
  22. 						<cover-view class="iconListClass">
  23. 							<cover-image class="icon" src="../../static/icon/like.png"></cover-image>
  24. 							<cover-view>
  25. 								<text class="context">12.5w</text>
  26. 							</cover-view>
  27. 						</cover-view>
  28. 						<cover-view class="iconListClass">
  29. 							<cover-image class="icon" src="../../static/icon/like.png"></cover-image>
  30. 							<cover-view style="white-space: nowrap;lines:1;">
  31. 								<text class="context">12.5w</text>
  32. 							</cover-view>
  33. 						</cover-view>
  34. 					</cover-view>
  35. 					<cover-view class="formation">
  36. 						<cover-view style="display: flex;align-items: center;flex-direction: row;">
  37. 							<cover-image class="header"
  38. 								src="https://i02piccdn.sogoucdn.com/a977a5bc3f44ffcf"></cover-image>
  39. 							<cover-view>
  40. 								<text class="context">作者</text>
  41. 							</cover-view>
  42. 						</cover-view>
  43. 						<cover-view>
  44. 							<text class="title">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</text>
  45. 						</cover-view>
  46. 					</cover-view>
  47. 					<cover-view class="duration">
  48. 						<cover-view class="long" :style="{width:item.percent+'rpx'}"></cover-view>
  49. 					</cover-view>
  50. 				</video>
  51. 			</swiper-item>
  52.  
  53. 		</swiper>
  54. 	</view>
  55. </template>

先来看看在第几个视频时，我们会遇到的情况：

        第1个：可能是视频从尾到头，也可能是从下一个播放器返回。

        第2个：可能是视频第一个过来，也可能是从下一个播放器返回。

        第3个：可能是视频第二个过来，也可能是从下一个播放器返回。

所以在滑动时，我们需要提前先进行判断到底是上滑还是下滑：

  1. qiehuan(e) {
  2.  
  3. 				if (this.oldActiveIndex < e.detail.current) {
  4. 					if (this.oldActiveIndex - e.detail.current != -2) {
  5. 						console.log('上滑');
  6. 						this.index++
  7. 						this.next(e.detail.current)
  8. 					} else {
  9. 						console.log("下滑");
  10. 						this.pre(e.detail.current)
  11. 						this.index--
  12. 					}
  13. 				} else if (this.oldActiveIndex > e.detail.current) {
  14. 					if (this.oldActiveIndex - e.detail.current != 2) {
  15. 						console.log('下滑');
  16. 						this.pre(e.detail.current)
  17. 						this.index--
  18. 					} else {
  19. 						console.log("上滑");
  20. 						this.index++
  21. 						this.next(e.detail.current)
  22. 					}
  23. 				}
  24. 				this.$nextTick(() => {
  25. 					this.oldActiveIndex = e.detail.current
  26. 				})
  27. 			},

我们需要一个变量来记录上一次滑动的播放器下标拿来对比，因为从2到0，和0到2的情况存在，所以判断需要拆开。

然后在对不同情况进行不同的处理，我比较懒，所以代码直接拆开写了。

  1. 			next(index) {
  2. 				if (Object.is(this.index, 2)) {
  3. 				}
  4. 				if (Object.is(index, 0)) {
  5. 					this.list[1] = this.allList[this.index + 1]
  6. 				}
  7. 				if (Object.is(index, 1)) {
  8. 					this.list[2] = this.allList[this.index + 1]
  9. 				}
  10. 				if (Object.is(index, 2)) {
  11. 					this.list[0] = this.allList[this.index + 1]
  12. 				}
  13. 				this.play(this.activeIndex)
  14. 			},
  15. 			pre(index) {
  16. 				if (Object.is(this.index, 2)) {
  17. 				}
  18. 				if (Object.is(index, 0)) {
  19. 					this.list[2] = this.allList[this.index - 2]
  20. 				}
  21. 				if (Object.is(index, 1)) {
  22. 					this.list[0] = this.allList[this.index - 2]
  23. 				}
  24. 				if (Object.is(index, 2)) {
  25. 					this.list[1] = this.allList[this.index - 2]
  26. 				}
  27. 				this.play(this.activeIndex)
  28. 			},

主要的处理就是这样，还有一些小功能也做了对应的处理，比如滑动时上一个暂停等等，还有一些小优化，进度条等等。

全部代码：

  1. <template>
  2. 	<view style="height: 100vh;flex:1;width:750rpx">
  3. 		<swiper @animationfinish="qiehuan" :current="activeIndex" @change="swiper" :circular="index==0?true:false" vertical
  4. 			class="list">
  5. 			<swiper-item disable-programmatic-animation class="item" v-for="(item,index) in list" :key="index">
  6. 				<video @ended="end" @pause='item.active=false' @click="pause(item,index)"
  7. 					@timeupdate="long($event,item,index)" :id="'Video'+index" class="video"
  8. 					:show-center-play-btn='false' :controls="false"
  9. 					src="https://media.w3.org/2010/05/sintel/trailer.mp4">
  10. 					<cover-view style="margin-top: 50rpx">
  11. 						<text style="color: aqua;">{{item.id}}</text></cover-view>
  12. 					<cover-view class="back" v-if="!item.active">
  13. 						<cover-image class="pauseIcon" src="../../static/icon/pause.png"></cover-image>
  14. 					</cover-view>
  15. 					<cover-view class="iconList">
  16. 						<cover-view class="iconListClass">
  17. 							<cover-image class="icon" src="../../static/icon/like.png"></cover-image>
  18. 							<cover-view>
  19. 								<text class="context">12.5w</text>
  20. 							</cover-view>
  21. 						</cover-view>
  22. 						<cover-view class="iconListClass">
  23. 							<cover-image class="icon" src="../../static/icon/like.png"></cover-image>
  24. 							<cover-view>
  25. 								<text class="context">12.5w</text>
  26. 							</cover-view>
  27. 						</cover-view>
  28. 						<cover-view class="iconListClass">
  29. 							<cover-image class="icon" src="../../static/icon/like.png"></cover-image>
  30. 							<cover-view style="white-space: nowrap;lines:1;">
  31. 								<text class="context">12.5w</text>
  32. 							</cover-view>
  33. 						</cover-view>
  34. 					</cover-view>
  35. 					<cover-view class="formation">
  36. 						<cover-view style="display: flex;align-items: center;flex-direction: row;">
  37. 							<cover-image class="header"
  38. 								src="https://i02piccdn.sogoucdn.com/a977a5bc3f44ffcf"></cover-image>
  39. 							<cover-view>
  40. 								<text class="context">作者</text>
  41. 							</cover-view>
  42. 						</cover-view>
  43. 						<cover-view>
  44. 							<text class="title">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</text>
  45. 						</cover-view>
  46. 					</cover-view>
  47. 					<cover-view class="duration">
  48. 						<cover-view class="long" :style="{width:item.percent+'rpx'}"></cover-view>
  49. 					</cover-view>
  50. 				</video>
  51. 			</swiper-item>
  52.  
  53. 		</swiper>
  54. 	</view>
  55. </template>
  56.  
  57. <script>
  58. 	export default {
  59. 		data() {
  60. 			return {
  61. 				// 视频下标，记录播放到第几个
  62. 				index: 0,
  63. 				// 数据
  64. 				allList: [{
  65. 						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
  66. 						active: false,
  67. 						currentTime: 0,
  68. 						duration: 121,
  69. 						percent: 0,
  70. 						id: 0
  71. 					},
  72. 					{
  73. 						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
  74. 						active: false,
  75. 						currentTime: 0,
  76. 						duration: 121,
  77. 						percent: 0,
  78. 						id: 1
  79. 					},
  80. 					{
  81. 						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
  82. 						active: false,
  83. 						currentTime: 0,
  84. 						duration: 121,
  85. 						percent: 0,
  86. 						id: 2
  87. 					},
  88. 					{
  89. 						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
  90. 						active: false,
  91. 						currentTime: 0,
  92. 						duration: 121,
  93. 						percent: 0,
  94. 						id: 3
  95. 					},
  96. 					{
  97. 						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
  98. 						active: false,
  99. 						currentTime: 0,
  100. 						duration: 121,
  101. 						percent: 0,
  102. 						id: 4
  103. 					},
  104. 					{
  105. 						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
  106. 						active: false,
  107. 						currentTime: 0,
  108. 						duration: 121,
  109. 						percent: 0,
  110. 						id: 5
  111. 					},
  112. 					{
  113. 						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
  114. 						active: false,
  115. 						currentTime: 0,
  116. 						duration: 121,
  117. 						percent: 0,
  118. 						id: 6
  119. 					},
  120. 					{
  121. 						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
  122. 						active: false,
  123. 						currentTime: 0,
  124. 						duration: 121,
  125. 						percent: 0,
  126. 						id: 7
  127. 					},
  128. 					{
  129. 						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
  130. 						active: false,
  131. 						currentTime: 0,
  132. 						duration: 121,
  133. 						percent: 0,
  134. 						id: 8
  135. 					},
  136. 					{
  137. 						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
  138. 						active: false,
  139. 						currentTime: 0,
  140. 						duration: 121,
  141. 						percent: 0,
  142. 						id: 9
  143. 					},
  144. 					{
  145. 						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
  146. 						active: false,
  147. 						currentTime: 0,
  148. 						duration: 121,
  149. 						percent: 0,
  150. 						id: 10
  151. 					},
  152. 				],
  153. 				list: [{
  154. 						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
  155. 						active: false,
  156. 						currentTime: 0,
  157. 						duration: 121,
  158. 						percent: 0,
  159. 						id: 0
  160. 					},
  161. 					{
  162. 						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
  163. 						active: false,
  164. 						currentTime: 0,
  165. 						duration: 121,
  166. 						percent: 0,
  167. 						id: 1
  168. 					},
  169. 					{
  170. 						src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
  171. 						active: false,
  172. 						currentTime: 0,
  173. 						duration: 121,
  174. 						percent: 0,
  175. 						id: 2
  176. 					},
  177. 				],
  178. 				// 播放器下标
  179. 				activeIndex: 0,
  180. 				// 记录上一个播放器下标
  181. 				oldActiveIndex: 0
  182. 			}
  183. 		},
  184. 		onReady() {},
  185. 		methods: {
  186. 			qiehuan(e) {
  187. 				if (this.oldActiveIndex < e.detail.current) {
  188. 					if (this.oldActiveIndex - e.detail.current != -2) {
  189. 						console.log('上滑');
  190. 						this.index++
  191. 						this.next(e.detail.current)
  192. 					} else {
  193. 						console.log("下滑");
  194. 						this.pre(e.detail.current)
  195. 						this.index--
  196. 					}
  197. 				} else if (this.oldActiveIndex > e.detail.current) {
  198. 					if (this.oldActiveIndex - e.detail.current != 2) {
  199. 						console.log('下滑');
  200. 						this.pre(e.detail.current)
  201. 						this.index--
  202. 					} else {
  203. 						console.log("上滑");
  204. 						this.index++
  205. 						this.next(e.detail.current)
  206. 					}
  207. 				}
  208. 				this.$nextTick(() => {
  209. 					this.oldActiveIndex = e.detail.current
  210. 				})
  211. 			},
  212. 			next(index) {
  213. 				if (Object.is(this.index, 2)) {
  214. 				}
  215. 				if (Object.is(index, 0)) {
  216. 					this.list[1] = this.allList[this.index + 1]
  217. 				}
  218. 				if (Object.is(index, 1)) {
  219. 					this.list[2] = this.allList[this.index + 1]
  220. 				}
  221. 				if (Object.is(index, 2)) {
  222. 					this.list[0] = this.allList[this.index + 1]
  223. 				}
  224. 				this.play(this.activeIndex)
  225. 			},
  226. 			pre(index) {
  227. 				if (Object.is(this.index, 2)) {
  228. 				}
  229. 				if (Object.is(index, 0)) {
  230. 					this.list[2] = this.allList[this.index - 2]
  231. 				}
  232. 				if (Object.is(index, 1)) {
  233. 					this.list[0] = this.allList[this.index - 2]
  234. 				}
  235. 				if (Object.is(index, 2)) {
  236. 					this.list[1] = this.allList[this.index - 2]
  237. 				}
  238. 				this.play(this.activeIndex)
  239. 			},
  240. 			play(index) {
  241. 				for (let i = 0; i < 3; i++) {
  242. 					uni.createVideoContext(`Video${i}`, this).pause()
  243. 				}
  244. 				this.videoContext = uni.createVideoContext('Video' + index, this)
  245. 				this.list[index].active = true
  246. 				this.videoContext.play()
  247. 			},
  248. 			swiper(e) {
  249. 				// console.log(e.detail.current);
  250. 				this.activeIndex = e.detail.current
  251. 				// this.play(e.detail.current)
  252. 				// this.play(this.activeIndex)
  253. 			},
  254. 			end(e) {
  255. 				this.activeIndex++
  256. 				if (Object.is(this.activeIndex, 3)) {
  257. 					this.activeIndex = 0
  258. 				}
  259. 			},
  260. 			long(e, item, index) {
  261. 				item.currentTime = e.detail.currentTime
  262. 				item.percent = (e.detail.currentTime / e.detail.duration) * 750
  263. 			},
  264. 			pause(item, index) {
  265. 				this.videoContext = uni.createVideoContext('Video' + index, this)
  266. 				if (item.active) {
  267. 					this.videoContext.pause()
  268. 				} else {
  269. 					this.videoContext.play()
  270. 				}
  271. 				this.list[index].active = !this.list[index].active
  272. 			},
  273. 			videoClick() {
  274.  
  275. 			}
  276. 		}
  277. 	}
  278. </script>
  279.  
  280. <style>
  281. 	.list {
  282. 		background-color: black;
  283. 		flex: 1;
  284. 		width: 750rpx;
  285. 	}
  286.  
  287. 	.video {
  288. 		flex: 1;
  289. 		width: 750rpx;
  290. 	}
  291.  
  292. 	.back {
  293. 		background-color: rgba(225, 225, 225, 0.3);
  294. 		flex: 1;
  295. 		width: 750rpx;
  296. 		justify-content: center;
  297. 		align-items: center;
  298. 	}
  299.  
  300. 	.pauseIcon {
  301. 		position: absolute;
  302. 		left: calc(50% - 25px);
  303. 		top: calc(50% - 30px);
  304. 		width: 50px;
  305. 		height: 60px;
  306. 	}
  307.  
  308. 	.duration {
  309. 		position: absolute;
  310. 		left: 0px;
  311. 		bottom: 0px;
  312. 		width: 100vw;
  313. 		height: 3px;
  314. 	}
  315.  
  316. 	.long {
  317. 		height: 100%;
  318. 		background-color: white;
  319. 	}
  320.  
  321.  
  322.  
  323. 	.formation {
  324. 		flex-direction: column;
  325. 		position: absolute;
  326. 		left: 10px;
  327. 		bottom: 10px;
  328. 		width: calc(100% - 80px);
  329. 		display: flex;
  330. 	}
  331.  
  332. 	.header {
  333. 		width: 40px;
  334. 		height: 40px;
  335. 		border-radius: 50%;
  336. 	}
  337.  
  338. 	.iconListClass {
  339. 		justify-content: center;
  340. 		align-items: center;
  341. 	}
  342.  
  343. 	.context {
  344. 		white-space: nowrap;
  345. 		width: 100rpx;
  346. 		color: white;
  347. 		margin-left: 5px;
  348. 		font-size: 13px;
  349. 		font-weight: bold;
  350. 	}
  351.  
  352. 	.title {
  353. 		width: 600rpx;
  354. 		margin-top: 10px;
  355. 		color: white;
  356. 		margin-left: 5px;
  357. 		font-size: 13px;
  358. 		font-weight: bold;
  359. 		text-overflow: ellipsis;
  360. 		overflow: hidden;
  361. 		white-space: nowrap;
  362. 		lines: 1;
  363. 	}
  364.  
  365.  
  366. 	.iconList {
  367. 		display: flex;
  368. 		flex-direction: column;
  369. 		justify-content: center;
  370. 		align-items: center;
  371. 		width: 40px;
  372. 		position: absolute;
  373. 		right: 10px;
  374. 		bottom: 10px;
  375. 	}
  376.  
  377. 	.icon {
  378. 		margin-top: 10px;
  379. 		width: 40px;
  380. 		height: 40px;
  381. 	}
  382.  
  383. 	.context {
  384. 		text-align: center;
  385. 		color: white;
  386. 		font-size: 13px;
  387. 	}
  388. </style>

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号