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截图

uniapp swiper轮播图自适应高度问题
uniapp swiper轮播图自适应高度问题
官方uni.getSystemInfo连接uni.getSystemInfo

上一篇:使用swiper完成轮播图


下一篇:java 文件按行读写