uni-app封装样式
时间: 2023-08-04 18:06:08 浏览: 108
uni-app 封装一个顶部选项卡组件
5星 · 资源好评率100%
uni-app 中可以使用动态绑定样式 `style`,实现根据数据动态更新页面样式的效果。
动态绑定样式需要在 `style` 属性中使用对象的形式,其中对象的属性名对应样式名,属性值对应样式值。例如:
```html
<view :style="{color: textColor, fontSize: fontSize + 'rpx'}">{{text}}</view>
```
在这个例子中,`color` 和 `fontSize` 是样式名,`textColor` 和 `fontSize` 是数据属性名。当 `textColor` 或 `fontSize` 发生改变时,页面中的文本颜色和字体大小就会发生相应的变化。
需要注意的是,`style` 属性中只能使用字符串和对象的形式绑定样式,不支持数组。同时,样式名必须使用驼峰式命名,例如 `fontSize`,而不是 `font-size`。
阅读全文