uniapp中scroll view高度适应问题

本文介绍如何在UniApp中使用uni.getSystemInfoSync()获取设备信息,通过计算窗口尺寸比例设置ScrollView的高度,实现自适应不同手机屏幕。关键在于使用计算属性设置scroll-view的高度为rpx单位。
摘要由CSDN通过智能技术生成

uniappscroll view 需要给固定高度,根据不同手机高度不一样scroll view高度不相同,uniapp中不能进行dom操作,如何让scroll view适应不同手机高度,计算好高度如何给scroll view 设置高度呢

通过uni.getSystemInfoSync()获取窗口宽度和高度动态设置 scroll-view 高度 :style动态绑定height高度

打印uni.getSystemInfoSync()

在这里插入图片描述
这里获得的高度是物理高度px 如何转成rpx

cumputed计算属性设置

computed:{
		scrollH:function(){
			let sys = uni.getSystemInfoSync();
			let winWidth = sys.windowWidth;
			let winrate = 750/winWidth;
			let winHeight =parseInt(sys.windowHeight*winrate)
			return winHeight
			
		}
	}
<scroll-view scroll-y="true" @scrolltolower="lower()" :style="{height:scrollH+'rpx'}">
			// 内容
</scroll-view>

:style="{height:scrollH+'rpx'}"

这样就解决了这个问题~

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值