uniapp移动端nvue使用swiper实现图片和视频切屏，图片轮播，类似抖音效果

今天药忘吃喽~ 2023-10-06 23:28 1阅读 0赞

上一片讲的代码只能h5端生效，嗨，晦气

因为移动端使用的nvue，所以不能用block标签，而且不能使用百分比布局，所以......出现的问题还是很多的，要给标签动态设置高度，不然占不满屏幕：

直接上代码：

<template>
    	<swiper class="swiper" :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" 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"
    					:style="{height:screenHeight+'px', width: windowWidth + 'px'}">
    					<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/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: 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"
    					},
    				],
    				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"
    				],
    				screenHeight: 0,
    				windowWidth: 0,
    				currentImgIndex: 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) {
    				clearTimeout(time)
    				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) {
    						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 {
    						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(this.pageStartY);
    			},
    			touchEnd(res) {
    				this.pageEndY = res.changedTouches[0].pageY;
    				console.log(this.pageEndY);
    			},
    			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>

效果图和h5端的一样，所以就不再单独上传了：

![be66c8653f714e6985613e991e53c18b.gif][]

[be66c8653f714e6985613e991e53c18b.gif]: https://img-blog.csdnimg.cn/be66c8653f714e6985613e991e53c18b.gif