uni-app css 样式怎么传递参数
时间: 2024-10-25 19:10:21 浏览: 40
基于Vue的uni-app插件/模板设计源码分享
uni-app 的 CSS 样式可以通过 `class` 或 `style` 属性传递参数。例如,如果你想基于某个条件改变 NumberBox 的颜色,你可以这样写:
```html
<view class="number-box {{isCustom ? 'custom-style' : ''}}">...</view>
<style scoped>
.number-box {
/* 基础样式 */
}
.custom-style {
background-color: var(--custom-color); /* 使用变量传递自定义颜色 */
}
</style>
<script>
Page({
data: {
isCustom: true, // 控制是否应用自定义样式
customColor: '#ff0000' // 可以在页面其他地方动态设置这个颜色
}
})
</script>
```
在这个例子中,如果 `isCustom` 为真(`true`),`.custom-style` 类会被应用,`customColor` 变量会决定 `.custom-style` 中背景的颜色。这展示了 uni-app 如何通过 JavaScript 数据驱动 CSS 样式。
阅读全文