uniapp swiper轮播图自适应高度问题

先来讲下主体思路：每个tab页（swiper-item）都嵌套在swiper中，swiper-item中在放置一个scroll-view，实现超出部分滑动；即让swiper、scroll-view高度都占满屏幕剩余部分

<–template部分–>
这里的:style="{height:swiperheight+‘px’}"是设置他动态的的高度
这里用scroll-view是把要设置自适应高度的地方包起来

	<swiper-item>
		<view class="swiper-item">
			<scroll-view scroll-y="true" :style="{height:swiperheight+'px'}">
				<view class="box" style="height: 100%;">
					<view >
						这里是内容
					</view>
				</view>
			</scroll-view>
		</view>
	</swiper-item>

<–data部分–>

       data(){
			return{
				swiperheight:0,//这里是动态赋值的高度
			}
		},

<–methods部分–>
这里用到uniapp的API函数uni.getSystemInfo

			// 调用方法获取到设备的可用高度
			uni.getSystemInfo({
				success: (res) => {
					// uni-app 提供了 upx2px 方法，将对应的 rpx 值转换成了 px
					let height = res.windowHeight - uni.upx2px(100)
					this.swiperheight = height; // 让data中定义的swiperheight高度等于计算过后的高度
					console.log(this.swiperheight)
				}
			});

完成上面的步骤就可以愉快的滚动屏幕啦，下面附两张uni.getSystemInfo的API截图

官方uni.getSystemInfo连接uni.getSystemInfo