uniapp 简陋易懂版仿抖音视频播放

1. 只实现了上滑（下滑稍微改动下就有了）

<template>
	<view class="flex-1">
		<view class="flex-1" style="position: fixed;left: 0;right: 0;" :style="getStyle"
		@touchmove="handleMove" @touchstart="handleStart" @touchend="handleEnd">
			<video id="myVideo" class="flex-1" @click.stop="handleClick" @ended="handleVideoEnd"
			:src="url" 
			title="666"
			:controls="false"
			:show-center-play-btn="false"
			autoplay 
			objectFit="cover"></video>
			
			<view v-if="!isPlaying"
			class="flex align-center justify-center" 
			style="position: fixed;left: 0;right: 0;top: 0;bottom: 0;">
				<image src="../../static/pause.png" style="width: 128rpx;height: 128rpx;"></image>
			</view>
		</view>
		<view :style="distance">
		</view>
	</view>
</template>

<script>
    // 就是一个url数组 里面几个视频链接 
	import url from './temp.js'
	export default {
		data() {
			return {
				videoCtx: null,
				isPlaying: true,
				startPageY: 0,
				movePageY: 0,
				index: 0,
				scrollH: 0
			}
		},
		onLoad() {
			this.videoCtx = uni.createVideoContext("myVideo", this)
		},
		beforeDestroy() {
			this.videoCtx = null
		},
		methods: {
			handleClick() {
				const self = this
				if(self.videoCtx) {
					if(self.isPlaying) {
						self.videoCtx.pause()
						self.isPlaying = false
					} else {
						self.videoCtx.play()
						self.isPlaying = true
					}
				}
			},
			handleMove(e) {
				this.movePageY = e.touches[0].pageY
			},
			handleStart(e) {
				this.startPageY = e.touches[0].pageY
			},
			handleEnd() {
				this.startPageY = 0
				this.movePageY = 0
				this.scrollH = 0
			},
			handleVideoEnd() {
				this.handleEnd()
				if(this.index < 2) {
					this.index = this.index + 1
				} else {
					this.index = 0
				}
				this.isPlaying = true
			}
		},
		watch:{
			scrollH(v) {
				if(v > 50) {
					this.handleVideoEnd()
				}
			}
		},
		computed: {
			url() {
				return url[this.index]
			},
			distance() {
                // 刚开始滑动的那一刻 movePageY 为零 不能计算进去
				if(this.movePageY != 0) {
					const h = Math.abs(Number(this.startPageY - this.movePageY).toFixed(2))
					this.scrollH = h
					return `height:${h}px;`
				}
			},
			getStyle() {
                // 让 videos 整体向上滑动
				if(this.scrollH == 0) {
					return "top: 0px;bottom: 0px"
				} else {
					return `top: ${-this.scrollH}px;bottom: ${this.scrollH}px`
				}
			}
		}
	}
</script>

<style>

</style>

有点简陋 纯手写 点滴进步也值得记录