uni-app中swiper组件无效果解决方案

一、具体问题

今天，在写uni-app的代码过程中，发现swiper组件不起效果，具体调试后，发现是这个原因，即每一个swiper-item组件的高度需要等于或超过swiper组件的高度，(为什么得等于或超过呢? 是因为官网有说明，滑动切换是一屏一屏的切换。swiper下的每个swiper-item是一个滑动切换区域，不能停留在2个滑动区域之间。)这样才可以产生正确的滑动效果。

下面是具体解决代码：

//viewList.vue文件
<template>
	<view class="videoList">
		<view class="swiper-box">
			<swiper class="swiper" :vertical="true" :touchable="true" :autoplay="autoplay">
				<swiper-item class="swiper-item">
					<view>我是第一页</view>
				</swiper-item>
				<swiper-item  class="swiper-item">
					<view>我是第二页</view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<view>我是第三页</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>
	
<style>
	.videoList {
		width: 100%;
		height: 100%;
	}
	/* swiper组件默认高度是150px */
	.swiper {
		height: 100vh;
	}
	/* 
		每一个swiper-item组件的高度需要等于或超过swiper组件的高度，
		(为什么得等于或超过呢? 是因为官网有说明，滑动切换是一屏一屏的切换。
		swiper下的每个swiper-item是一个滑动切换区域，不能停留在2个滑动区域之间。)
		这样才可以产生正确的滑动效果
	 */
	.swiper-item {
		height: 100vh;
		background-color: pink;
	}
</style>

二、补充部分

关注公众号：【深漂程序员小庄】：
内含丰富的学习资源和面试经验（不限前端、java），还有学习交流群可加，并且还有各大厂大佬可一起交流学习，一起进步～添加小庄微信，回复【加群】，可加入互联网技术交流群：