uniapp动态style不能使用upx

1. 什么是uniapp？

Uniapp是一款基于Vue.js框架构建的跨平台应用开发框架，可以快速地开发出同时支持多个平台的应用。Uniapp的特点包括:

不依赖原生平台技术

支持多个平台，包括微信小程序、支付宝小程序、H5、安卓和iOS

支持Vue.js开发模式和语法

2. 动态style和upx简介

2.1 动态style

在Uniapp中，我们可以使用动态style语法来实现动态的样式效果。具体来说，我们通过在标签上添加一个:style属性，然后在内部指定需要动态设定的css属性和对应的值，就可以实现动态的样式变化。

<template>
  <view :style="{backgroundColor: bgColor}"></view>
</template>
<script>
export default {
  data() {
    return {
      bgColor: 'white'
    }
  }
}
</script>

上述代码中，我们通过动态设定视图组件的背景颜色，通过改变data中的bgColor的值，就可以实现动态背景颜色。

2.2 upx

uniapp中，我们一般使用upx作为css长度单位，它是一种设计稿与设备独立像素转换的单位，能够正确适配不同分辨率的显示设备。在编写样式时，可以使用类似px的方式来书写upx。

3. 为什么不能在动态style中使用upx？

虽然upx是uniapp中的推荐单位，但是在动态样式中不能使用upx。原因是upx只有在样式文件中才能自动转换成对应的像素值，动态样式下无法做到这一点。如果直接在动态样式中写upx，那么就会因为无法转换成像素而失效。

我们可以看下面这个例子来理解：

<template>
  <view :style="{width: '100rpx', height: h + 'rpx'}"></view>
</template>
<script>
export default {
  data() {
    return {
      h: 200
    }
  }
}
</script>

上述代码中，我们使用100rpx的宽度和动态的高度来设定视图组件的大小。由于宽度使用固定值rpx，因此可以正确显示。但是高度使用了动态绑定，upx值不能被正确转换成像素值，因此在多个设备上可能会显示异常。

4. 如何解决不能在动态style中使用upx的问题？

虽然不能在动态样式中直接使用upx，但是我们可以使用计算属性来解决这个问题。我们首先在计算属性中设定样式值，然后在动态样式中使用计算属性的返回值。如下所示：

<template>
  <view :style="styleObj"></view>
</template>
<script>
export default {
  data() {
    return {
      h: 200
    }
  },
  computed: {
    styleObj() {
      return {
        width: '100rpx',
        height: uni.upx2px(this.h) + 'px'
      }
    }
  }
}
</script>

在上述代码中，我们在计算属性styleObj中设定组件宽度和动态高度。这里使用了uni.upx2px方法来将upx值转换成对应的像素值。通过这种方式，我们就可以在动态样式中使用upx。

5. 总结

在uniapp中，我们可以使用动态style完成动态样式表达，但不能直接在动态样式中使用upx。在需要使用upx的情况下，我们可以通过使用计算属性将upx转换成对应的像素值来解决问题，从而实现动态样式的目的。