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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值