uniapp：swiper+scroll-view自适应高度和滚动

一、问题原因

uniapp的swiper组件，默认大小为150px（swiper组件是类似于PC端的Tab页，左右切换，详情见官方文档）
这显然不符合我们平时的业务需求
当有大量数据需要渲染时，我们就需要swiper的高度为自适应的，同是配合scroll-view实现区域滚动效果

二、代码

多说无益，直接上才艺

<swiper :current="current" duration="400" @change="swiperChange" :style="{height:swiperheight+'px'}">
		<swiper-item>
			<scroll-view scroll-y>
				<view :style="{height:swiperheight+'px'}">
				.......
				</view>
			</scroll-view>
		</swiper-item>
		
		<swiper-item>
			<scroll-view scroll-y>
				<view :style="{height:swiperheight+'px'}">
				.......
				</view>
			</scroll-view>
		</swiper-item>
</swiper>

// data中定义变量
swiperheight: 500, // 默认给了个高度，具体数值随意

// 核心方法
onLoad() {
	uni.getSystemInfo({
		success: (res) => {
			// 这个减100，看个人需求可以不要，这里我需要和底部隔开一定距离，变相来讲就是让这个swiper少一点高度，你想想我这个操作
			let height = res.windowHeight - uni.upx2px(100)  
			console.log(height);
			this.swiperheight = height;
		}
	})
},

三、思路解析

1、思路就是让swiper组件的高度与屏幕，同是利用scroll-view实现区域滚动
2、这个问题有很多结局方案，我这里只提供了一种，也是我认为最简单直接好用的一种，其他的我都试过，有点点点点用着不如这个舒服

四、总结

这个是个实用帖，这几个api确实没啥可讲的，希望能通过简单的讲解来帮你快速的解决实际问题。
技术在于分享，分享助于学习，加油！