uniapp的宽高怎么设置-猿码集

1. uniapp的宽高设置方法

在uniapp中，设置宽高可以通过三种方式进行设置：style属性、class属性、计算属性。下面我们分别介绍这三种方式。

1.1 style属性设置宽高

style属性可以直接在标签中进行设置宽高，语法如下：


<view style="width: 200rpx; height: 200rpx;"></view>

其中，width代表宽度，height代表高度。rpx是一种相对单位，1rpx表示在不同设备上等比缩放的像素。

1.2 class属性设置宽高

我们也可以在css中定义class样式，在标签中通过class属性进行设置宽高。示例如下：


/* css文件中定义class样式 */
.square {
  width: 200rpx;
  height: 200rpx;
}
//在标签中使用class属性
<view class="square"></view>

1.3 计算属性设置宽高

有时候我们需要根据数据动态改变宽高，这时就可以通过计算属性进行设置。示例如下：


/* 在vue文件中定义计算属性 */
computed: {
  squareSize: function () {
    return this.isActive ? '200rpx' : '100rpx'
  }
}
//在标签中使用计算属性设置宽高
<view :style="{ width: squareSize, height: squareSize }"></view>

在这里，我们通过计算属性squareSize返回不同的string类型值，实现根据isActive动态改变宽高。

2. uniapp的宽高单位选择

在uniapp中，宽高单位可以选择px、rpx、vw、vh等单位。下面我们逐一进行介绍。

2.1 px单位

px是一种固定像素单位，它是相对于设备屏幕分辨率的物理像素计算的。在高分屏的设备上，1px可能会对应多于1个物理像素，导致显示效果失真。因此在uniapp中应该尽量避免使用px单位。

2.2 rpx单位

rpx是一种相对于设备宽度的单位，1rpx等于屏幕宽度的1/750。它会根据不同设备的宽度进行等比缩放，使得在不同设备上显示效果相似。因此我们在uniapp中使用rpx作为宽高单位时会更好一些。

2.3 vw和vh单位

vw和vh是css3新增的单位，它们分别代表视窗宽度和高度的百分比。它们的主要优势在于适用于响应式布局，可以根据不同设备的尺寸动态地进行等比缩放。但是如果使用vw和vh单位来设置宽高，可能会导致显示效果在不同设备上差异较大，应该慎用。

3. 实例演示

为了更好地理解uniapp的宽高设置方法，下面我们通过一个实例进行演示。我们先在vue文件中定义一个计算属性：


computed: {
  squareSize: function () {
    return Math.floor(Math.random()*300)+100 + 'rpx'
  }
}

它会随机返回100到400之间的整数，作为正方形的宽高。

接下来我们在模板中使用该计算属性进行设置：


<view :style="{ width: squareSize, height: squareSize }">正方形</view>

这样就可以在页面中动态地显示不同尺寸的正方形了。完整代码如下：


<template>
  <view class="container">
    <view :style="{ width: squareSize, height: squareSize }">正方形</view>
  </view>
</template>
<script>
export default {
  computed: {
    squareSize: function () {
      return Math.floor(Math.random()*300)+100 + 'rpx'
    }
  }
}
</script>
<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

通过上面的实例，我们可以看到，使用计算属性+style属性可以非常方便地实现动态设置宽高的功能。

4. 总结

本文介绍了uniapp中三种设置宽高的方法：style属性、class属性、计算属性，以及常用的宽高单位：px、rpx、vw、vh。通过实例的演示，我们可以看到它们在uniapp中的使用方法。在实际开发中，我们应该根据具体情况灵活设置宽高，并选择合适的宽高单位，以达到最佳的显示效果。

uniapp的宽高怎么设置