+
95
-

回答

经过长时间的研究和实验,终于发明一种新的兼容app、小程序的通用短视频上下滑动解决方案,该方案未使用swiper来实现,而是全新的方式,方案如下:

点击查看全文

<template>
	<view @touchstart="onTouchStart" @touchend="onTouchEnd" @tap="ontap" @touchmove="onTouchmove"
		:style="'width: 750rpx; height:'+screenHeight+'rpx;overflow: hidden; position: relative;'">
		<!-- 	适合小程序h5 app同时兼容的上下滑动视频播放器 -->
		
		
		

		<block v-for="(item,index) in shortvideolist">

			<image v-if="index==nowindex-1" :src="item.videoimg"
				:style="'width: 750rpx; height: '+screenHeight+'rpx;position: absolute;top:'+((scrollTop*(nowindex+1))-screenHeight)+'rpx;z-index:1;'"
				mode="aspectFill"></image>

			<video  @timeupdate="timeupdate" id="myVideo" v-if="index==nowindex" :poster="item.videoimg"
				:src="item.videourl" loop
				:style="'width: 750rpx; height: '+screenHeight+'rpx;position: absolute;top:'+(scrollTop*(nowindex+1))+'rpx;z-index:1;'"
				object-fit="cover">

				<cover-view
					style="position: absolute;right: 10rpx; bottom: 20rpx;background-color: black;color: white;font-size: 40rpx;text-align: center;">

					底部文字
				</cover-view>
				<cover-view style="position: absolute;top:0rpx;">
					<cover-view>推荐</cover-view>
				</cover-view>

			</video>
			<image v-if="index==nowindex+1" :src="item.videoimg"
				:style="'width: 750rpx; height: '+screenHeight+'rpx;position: absolute;top:'+((scrollTop*(nowindex+1))+screenHeight)+'rpx;z-index:1;'"
				mode="aspectFill">

		</block>

		<!-- <view style="position: absolute;z-index:123123;background-color: black;width: 750rpx;height: 100rpx;transform: translateY(100rpx);">dddd</view> -->
		<!-- 	</view> -->
	</view>
</template>

<script>
	import {
		proxyRefs
	} from "vue";
	export default {
		data() {
			return {
				shortvideolist: [],
				nowindex: 0,
				screenHeight: 0,
				scrollTop: 0,
				isseting: false,
				isdrag: false,
				touchNum: 0,
				movenum: 0,
			}
		},
		onLoad() {
			var that = this;
			uni.getSystemInfo({
				success: function(res) {

					that.screenHeight = res.windowHeight / (uni.upx2px(100) / 100)-300;


				}
			});

			setTimeout(function() {
				that.shortvideolist = [{
					"videoid": 3,
					"video_autoplay": true,
					"video_is_muted": false,
					"video_is_player": true,
					"videoimg": "https://repo.bfw.wiki/bfwrepo/image/61ac60be5ec44.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_450,h_900,/quality,q_90",
					"videoname": "风景非常好,春天来13242,让我们一起来踏春吧!!!!",
					"videourl": "https://repo.bfw.wiki/bfwrepo/video/62298b73015fb.mp4"
				}, {
					"videoid": 7,
					"video_is_player": true,
					"video_autoplay": true,
					"video_is_muted": false,
					"videoimg": "https://repo.bfw.wiki/bfwrepo/image/61ac60be5ec44.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_450,h_900,/quality,q_90",
					"videoname": "风景非常好,春天来了,让我们一起来踏春吧!!!!",
					"videourl": "https://repo.bfw.wiki/bfwrepo/video/62298b60d3996.mp4"
				}, {
					"videoid": 2325,
					"video_autoplay": true,
					"video_is_muted": false,
					"video_is_player": true,
					"videoimg": "https://repo.bfw.wiki/bfwrepo/image/61ac60be5ec44.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_450,h_900,/quality,q_90",
					"videoname": "风景非常好,春天来了,让我们一起来踏春吧!!!!",
					"videourl": "https://repo.bfw.wiki/bfwrepo/video/62298b941b881.mp4"
				}, {
					"videoid": 53,
					"video_autoplay": true,
					"video_is_player": true,
					"video_is_muted": false,
					"videoimg": "https://repo.bfw.wiki/bfwrepo/image/61ac60be5ec44.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_450,h_900,/quality,q_90",
					"videoname": "风景非常好,春天来了,让我们一起来踏春吧!!!!",
					"videourl": "https://repo.bfw.wiki/bfwrepo/video/62298b941b881.mp4"
				}, {
					"videoid": 225,
					"video_is_player": true,
					"video_autoplay": true,
					"video_is_muted": false,
					"videoimg": "https://repo.bfw.wiki/bfwrepo/image/61ac60be5ec44.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_450,h_900,/quality,q_90",
					"videoname": "风景非常好,春天来了,让我们一起来踏春吧!!!!",
					"videourl": "https://repo.bfw.wiki/bfwrepo/video/62298b941b881.mp4"
				}, {
					"videoid": 15,
					"video_is_player": true,
					"video_autoplay": true,
					"video_is_muted": false,
					"videoimg": "https://repo.bfw.wiki/bfwrepo/image/61ac60be5ec44.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_450,h_900,/quality,q_90",
					"videoname": "风景非常好,春天来了,让我们一起来踏春吧!!!!",
					"videourl": "https://repo.bfw.wiki/bfwrepo/video/62298b941b881.mp4"
				}, {
					"videoid": 125,
					"video_is_player": true,
					"video_autoplay": true,
					"video_is_muted": false,
					"videoimg": "https://repo.bfw.wiki/bfwrepo/image/61ac60be5ec44.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_450,h_900,/quality,q_90",
					"videoname": "风景非常好,春天来了,让我们一起来踏春吧!!!!",
					"videourl": "https://repo.bfw.wiki/bfwrepo/video/62298b941b881.mp4"
				}];

				setTimeout(function() {
					that.videocxt = uni.createVideoContext("myVideo", that);
					that.videocxt.play();
				}, 400);

			}, 500);
		},
		methods: {
			playv() {
				var that = this;
				setTimeout(function() {
					if (that.shortvideolist[that.nowindex].playedtime > 0) {
						console.log("current" + that.shortvideolist[that.nowindex].playedtime)

						that.videocxt.seek(parseInt(that.shortvideolist[that.nowindex].playedtime));
						that.videocxt.play();
					} else {
						that.videocxt.play();
					}

				}, 400);
			},
			onChange(e) {
				this.nowindex = e.detail.current;
			},
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				var that = this;

				if (this.isseting) {
					return;
				}
				this.isseting = true;

				console.log(e)

				this.nowindex = parseInt((e.detail.scrollTop + 580) / 580) - 1;


				this.scrollTop = this.nowindex * 580;
				console.log(this.nowindex)
				console.log(this.scrollTop)
				setTimeout(function() {
					that.isseting = false;
				}, 2000);
			},
			onTouchStart: function(e) {
				const {
					pageY
				} = e.changedTouches[0]; //记录手指位置
				this.isdrag = true;
				this.startY = pageY;

			},
			timeupdate(e) {
				
				if(Math.trunc(e.detail.currentTime)==Math.trunc(e.detail.duration)){
					console.log("播放技术");
				}
				
			
				this.shortvideolist[this.nowindex].playedtime = e.detail.currentTime;
				console.log(e.detail)
			},
			ontap() {
				console.log("dddddddddddd")
				// let videoid = 'video-' + this.videoidx;
				// console.log(videoid);
				let nowvideo = uni.createVideoContext("myvideo", this);

				if (nowvideo != undefined) {
					if (this.nowplaying) {
						nowvideo.pause();

						this.nowplaying = false;

					} else {
						nowvideo.play();
						this.nowplaying = true;
					}
				} // this.videoContext = wx.createVideoContext('video');

			},
			onTouchmove(e) {
				const {
					startY
				} = this;
				if (this.isdrag) {
					//this.movenum=parseInt(e.changedTouches[0].pageY);
					//console.log(e.changedTouches[0].pageY)
					this.scrollTop = parseInt(e.changedTouches[0].pageY - startY);
				}

			},
			onTouchEnd: function(e) {
				this.isdrag = false;
				this.scrollTop = 0;
				// this.movenum=0;
				let thresholdValue = 100;
				const {
					startY
				} = this;
				let movey = e.changedTouches[0].pageY;
				let changeY = movey - startY;

				this.touchNum++
				setTimeout(() => {
					if (this.touchNum == 1) {
						console.log('单击')
					}
					if (this.touchNum >= 2) {
						console.log('双击')
					}
					this.touchNum = 0
				}, 250)



				if (changeY > 0) {
					if (changeY >= thresholdValue) {

						this.nowindex = this.nowindex >= 1 ? this.nowindex - 1 : 0;



						this.playv();
						console.log('手指向下滑动,往上切换视频');

					}
				} else {
					let abschangeY = Math.abs(changeY);

					if (abschangeY >= thresholdValue) {

						console.log('向上滑动,往下切换视频');
						this.playv();
						if (this.shortvideolist.length - this.nowindex == 4) {
							console.log("加载更多");
						}
						if (this.shortvideolist.length <= this.nowindex + 1) {
							uni.showToast({
								title: "没有更多了",
								icon: "none"
							})
							console.log("没有了");
						} else {
							this.nowindex = this.nowindex + 1;
						}

					}
				}
			}
		}
	}
</script>

<style>

</style>

网友回复

我知道答案,我要回答