uniapp安卓端swiper嵌套swiper图片轮播和视频时，滑动图片不流畅问题，仿抖音效果

1024小神

已于 2022-07-27 21:33:41 修改

阅读量4.2k

点赞数 1

分类专栏： HTML前端文章标签：前端 javascript 开发语言

于 2022-07-27 21:17:06 首次发布

本文链接：https://blog.csdn.net/weixin_44786530/article/details/126023235

版权

HTML前端专栏收录该内容

621 篇文章 38 订阅

订阅专栏

还是VueM项目中，当图片和视频轮播切换时候，ios端是流畅的，但是安卓端不行，，，非常不流畅，滑动十下，可能只有一下会触发滑动事件，所以就有了手动监听滑动方向，动态改变滑屏的效果：

最后层绑定滑屏索引：

然后监听滑动的Y坐标:

然后滑动结束时候判断滑动位置和滑动距离，从而确定是向哪里滑动，再动态切换滑屏项

但是这个会影响ios端的正常播放,,,,,,

要通过判断平台来决定是否增加这个代码:

全部代码：

<template>
	<swiper class="swiper" :current="wrapIndex" :style="{height:screenHeight+'px', width: windowWidth + 'px'}"
		:vertical="true" @change="change" @touchstart="touchStart" @touchend="touchEnd">
		<swiper-item v-for="item of videoList" :style="{height:screenHeight+'px', width: windowWidth + 'px'}"
			:key="item.id" ref="swiperItem" :data-type="item.type" class="swiper-item">
			<videoPlayer v-if="item.type === 'video'" :video="item" :screenHeight="screenHeight"
				:windowWidth="windowWidth" :style="{height:screenHeight+'px', width: windowWidth + 'px'}" ref="player">
			</videoPlayer>
			<swiper v-else class="swiper" circular :indicator-dots="true" :autoplay="true" @change="changeswiper"
				:current="currentImgIndex" :style="{height:screenHeight+'px', width: windowWidth + 'px'}">
				<swiper-item v-for="(img,index) in item.imgList" :key="index">
					<image :src="img" mode="scaleToFill" :style="{height:screenHeight+'px', width: windowWidth + 'px'}">
					</image>
				</swiper-item>
			</swiper>
		</swiper-item>
	</swiper>
</template>

<script>
	import videoPlayer from "./components/videoPlayer.nvue"
	var time = null
	export default {
		props: ["myList"],
		components: {
			videoPlayer,
		},
		name: "video-list",
		data() {
			return {
				videoList: [{
						id: 7,
						type: "image",
						imgList: [
							'https://img-blog.csdnimg.cn/img_convert/4ce460a31366926464acc88c991721d9.jpeg',
							'https://img-blog.csdnimg.cn/img_convert/a8d701d5adc9008ca018905f43c34145.jpeg',
							'https://img-blog.csdnimg.cn/img_convert/3090b46bd91e5c7ee5d78d988fbae0bd.jpeg',
							"https://img-blog.csdnimg.cn/img_convert/08acb513a12e1d7d654cc43cf4e2ee48.jpeg",
							"https://img-blog.csdnimg.cn/img_convert/eebf7eefba5849ef9788e32c148061c8.jpeg"
						],
					}, {
						id: 1,
						type: "video",
						preImg: "http://p1-q.mafengwo.net/s16/M00/8D/4D/CoUBUmFZOWKAA8mQAA8Oww0vs7k240.jpg",
						src: "https://txmov2.a.yximgs.com/upic/2020/03/14/16/BMjAyMDAzMTQxNjIwMDlfMTI0OTQzNzMzOV8yNDk0OTExNDY1NF8xXzM=_b_B8cf5a4391531e161385a32cdadfef87c.mp4"
					},
					{
						id: 8,
						type: "image",
						imgList: [
							'https://img-blog.csdnimg.cn/img_convert/eb06724f35a0436820a23b388c8c7217.jpeg',
							'https://img-blog.csdnimg.cn/img_convert/3090b46bd91e5c7ee5d78d988fbae0bd.jpeg',
							"https://img-blog.csdnimg.cn/img_convert/08acb513a12e1d7d654cc43cf4e2ee48.jpeg",
							"https://img-blog.csdnimg.cn/img_convert/eebf7eefba5849ef9788e32c148061c8.jpeg"
						],
					},
					{
						id: 2,
						type: "video",
						preImg: "http://b1-q.mafengwo.net/s16/M00/23/F3/CoUBUmFbN5OAGqEkAA4O0V-U1uo031.jpg",
						src: "https://txmov2.a.yximgs.com/upic/2020/10/02/09/BMjAyMDEwMDIwOTAwMDlfMTIyMjc0NTk0Ml8zNjk3Mjg0NjcxOF8xXzM=_b_B28a4518e86e2cf6155a6c1fc9cf79c6d.mp4"
					},
					{
						id: 3,
						type: "video",
						preImg: "http://p1-q.mafengwo.net/s16/M00/23/F4/CoUBUmFbN5WAbMikAA5cYlWno5U709.jpg",
						src: "https://txmov6.a.yximgs.com/upic/2020/08/23/00/BMjAyMDA4MjMwMDMyNDRfMTYzMzY5MDA0XzM0ODI4MDcyMzQ5XzFfMw==_b_B9a1c9d4e3a090bb2815994d7f33a906a.mp4"
					},
					{
						id: 4,
						type: "video",
						preImg: "http://p1-q.mafengwo.net/s18/M00/E6/C0/CoUBYGFceTyAOSBqABFXcMPFJ1w112.jpg",
						src: "https://alimov2.a.yximgs.com/upic/2020/03/04/15/BMjAyMDAzMDQxNTU3MTdfMzE3MDM5OTAzXzI0NDUwNjQ1MzgxXzFfMw==_b_B53c20819cb9a2103b9805b0144f545cf.mp4"
					},
					{
						id: 5,
						type: "video",
						preImg: "http://p1-q.mafengwo.net/s18/M00/E6/C0/CoUBYGFceTyAOSBqABFXcMPFJ1w112.jpg",
						src: "https://txmov2.a.yximgs.com/upic/2020/07/14/16/BMjAyMDA3MTQxNjEyNDBfMTU3MDQyNjA0XzMyMzUyOTQ4NzM0XzJfMw==_b_Bd53949260b17aaa7b712526aa61e590a.mp4"
					},
					{
						id: 6,
						type: "video",
						preImg: "http://p1-q.mafengwo.net/s18/M00/E6/C0/CoUBYGFceTyAOSBqABFXcMPFJ1w112.jpg",
						src: "https://txmov2.a.yximgs.com/upic/2020/09/28/15/BMjAyMDA5MjgxNTAwMTlfNjk3OTM4NjUzXzM2NzQyNzU5MzA2XzFfMw==_b_B6e8aca57e704ac40b34856eb663b8d57.mp4"
					},
				],
				screenHeight: 0,
				windowWidth: 0,
				currentImgIndex: 0,
				wrapIndex: 0
			};
		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					console.log("首页获取到的页面高度:windowHeight", res.windowHeight);
					console.log("首页获取到的页面高度:windowWidth", res.windowWidth);
					this.windowWidth = res.windowWidth;
					this.screenHeight = res.windowHeight;
				}
			});
		},
		methods: {
			change(res) {
				console.log("change事件执行了");
				this.wrapIndex = res.detail.current
				this.page = res.detail.current
				let swiperPre = this.$refs.swiperItem[this.page - 1]
				let swiperItem = this.$refs.swiperItem[this.page]
				let swiperNext = this.$refs.swiperItem[this.page + 1]
				let currentType = swiperItem.$attrs["dataType"]
				time = setTimeout(() => {
					if ((this.pageStartY - this.pageEndY) > 150) {
						console.log("向上滑动当前页:" + this.page);
						console.log("当前媒体类型:" + currentType);
						if (currentType === "video") {
							swiperItem.$children[0].playVideo()
							this.pageStartY = 0
							this.pageEndY = 0
						} else {
							console.log("改变图片索引:");
							this.currentImgIndex = 0
						}
						if (swiperPre.$attrs["dataType"] === "video") {
							swiperPre.$children[0].pauseVideo()
						}
					} else if ((this.pageStartY - this.pageEndY) < -150) {
						console.log("向下滑动" + this.page);
						console.log("当前媒体类型:" + currentType);
						// console.log("改变当前显示图片索引:", this.currentImgIndex);
						if (currentType === "video") {
							swiperItem.$children[0].playVideo()
							this.pageStartY = 0
							this.pageEndY = 0
						} else {
							console.log("改变图片索引:");
							this.currentImgIndex = 0
						}
						if (swiperNext.$attrs["dataType"] === "video") {
							swiperNext.$children[0].pauseVideo()
						}
					}
				}, 1)
			},
			touchStart(res) {
				this.pageStartY = res.changedTouches[0].pageY;
				console.log("touchStart：" + this.pageStartY);
			},
			touchEnd(res) {
				this.pageEndY = res.changedTouches[0].pageY;
				console.log("touchEnd：" + this.pageEndY);
				let platform = uni.getSystemInfoSync().platform;
				if (platform == 'android') {
					if ((this.pageStartY - this.pageEndY) > 150) {
						console.log("向上滑动:");
						if (this.wrapIndex < (this.videoList.length - 1)) {
							this.wrapIndex = this.wrapIndex + 1
						}
					} else if ((this.pageStartY - this.pageEndY) < -150) {
						console.log("向下滑动:");
						if (this.wrapIndex > 1) {
							this.wrapIndex = this.wrapIndex - 1
						}
					}
				}
			},
			changeswiper(e) {
				this.currentImgIndex = e.detail.current
			}
		},
		watch: {
			myList() {
				this.list = this.myList;
			}
		}
	}
</script>

<style>
	.swiper-img {
		width: 100vw;
		height: 100vh;
	}

	/* 	.left-box {
		z-index: 20;
		position: absolute;
		bottom: 50px;
		left: 10px;
	}

	.right-box {
		z-index: 20;
		position: absolute;
		bottom: 50px;
		right: 10px;
	} */
</style>