uni-app运行至微信小程序端style动态绑定失效问题

最新推荐文章于 2025-05-14 18:31:08 发布

原创最新推荐文章于 2025-05-14 18:31:08 发布 · 4.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #vue #小程序

uni-app 专栏收录该内容

1 篇文章

订阅专栏

在开发微信小程序时遇到一个问题，onLoad()获取手机屏幕高度并动态绑定到view样式中，但在HbuilderX正常显示，微信小程序却不识别upx单位。解决办法是将动态绑定的upx转换为px，例如：将`this.phoneHight=res.windowHeight*2+55+upx;`改为`this.phoneHight=res.windowHeight+25+px;`或使用uni.upx2px()进行转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、问题描述:

今天开发遇到了一个前端样式问题。由于业务需要，onLoad()获取到手机屏幕长度然后将长度动态绑定至view标签的sytle属性中，在HbuilderX内置浏览器中显示正常，但在微信小程序中却显示不出来绑定的样式，下面是绑定时的代码。

页面标签部分：

	<view :style="{height:phoneHight}" class="content">
        ... ...
	</view>

script部分:

export default {
		data() {
			return {
				phoneHight:'50upx',
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success:(res)=>{
					console.log("手机可用高度:"+res.windowHeight*2+"upx");
					this.phoneHight = res.windowHeight*2+55+"upx";
				}
			})
		},

二、解决措施

试过了很多方式都不能解决问题，最后发现时微信小程序动态绑定时不能识别upx单位，故在动态绑定时需要将upx转换成px的形式。

错误代码：

this.phoneHight = res.windowHeight*2+55+"upx";

正确代码：

this.phoneHight = res.windowHeight+25+"px";

当然也可以用**uni.upx2px()**函数来进行单位之间的转换

至此，问题解决