uniapp 样式切换

动态类名绑定

通过 :class 绑定动态类名，结合条件判断实现样式切换。在模板中使用三元表达式或对象语法控制类名生效与否。

<template>  
  <view :class="isActive ? 'active-style' : 'inactive-style'">内容</view>  
</template>  

或在脚本中定义计算属性：

computed: {  
  dynamicClass() {  
    return {  
      'active-style': this.isActive,  
      'disabled': !this.isValid  
    };  
  }  
}  

内联样式绑定

使用 :style 直接绑定动态样式对象，适用于需要实时计算的样式属性。

<view :style="{ color: textColor, fontSize: fontSize + 'px' }">动态样式</view>  

脚本中定义样式对象：

data() {  
  return {  
    styleObject: {  
      backgroundColor: 'red',  
      transform: `rotate(${angle}deg)`  
    }  
  };  
}  

条件渲染结合样式

通过 v-if/v-else 或 v-show 切换不同样式结构的元素，适合整体样式差异较大的场景。

<view v-if="theme === 'dark'" class="dark-theme">暗色主题</view>  
<view v-else class="light-theme">亮色主题</view>  

全局主题管理

利用 Vuex 或全局变量管理主题状态，通过 CSS 变量实现动态主题切换。

1. 定义全局 CSS 变量：

   :root {  
   --primary-color: #007AFF;  
   --bg-color: #FFFFFF;  
   }  
   .dark-theme {  
   --primary-color: #0A84FF;  
   --bg-color: #1C1C1E;  
   }  

2. 在组件中应用变量：

   <view class="container" :class="theme">  
   <text style="color: var(--primary-color)">文本</text>  
   </view>  

3. 通过 JavaScript 切换主题类名：

   methods: {  
   switchTheme() {  
    this.theme = this.theme === 'dark-theme' ? '' : 'dark-theme';  
   }  
   }  

注意事项

• 使用 rpx 单位确保多端样式兼容性。
• 动态样式绑定可能影响渲染性能，避免频繁更新复杂样式。
• 深色模式适配建议结合 uni.getSystemInfo() 获取系统主题设置。