uni-halo/.agents/skills/uniapp-project/examples/components/built-in/switch.md

switch 组件示例

官方文档

参考官方文档：https://uniapp.dcloud.net.cn/component/switch.html

概述

switch 是开关选择器组件，用于两种状态的切换。

基础用法

<template>
  <switch :checked="isChecked" @change="handleChange" />
</template>

<script>
export default {
  data() {
    return {
      isChecked: false
    }
  },
  methods: {
    handleChange(e) {
      this.isChecked = e.detail.value
    }
  }
}
</script>

完整示例

示例 1: 基本开关

<template>
  <view class="container">
    <view class="switch-item">
      <text>通知开关</text>
      <switch :checked="notifyEnabled" @change="handleNotifyChange" />
    </view>
    <view class="switch-item">
      <text>声音开关</text>
      <switch :checked="soundEnabled" @change="handleSoundChange" />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      notifyEnabled: true,
      soundEnabled: false
    }
  },
  methods: {
    handleNotifyChange(e) {
      this.notifyEnabled = e.detail.value
      console.log('通知开关', this.notifyEnabled)
    },
    handleSoundChange(e) {
      this.soundEnabled = e.detail.value
      console.log('声音开关', this.soundEnabled)
    }
  }
}
</script>

<style>
.switch-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
}
</style>

示例 2: 自定义颜色

<template>
  <view class="container">
    <view class="switch-item">
      <text>默认颜色</text>
      <switch :checked="checked1" @change="checked1 = $event.detail.value" />
    </view>
    <view class="switch-item">
      <text>自定义颜色</text>
      <switch 
        :checked="checked2" 
        color="#ff3b30"
        @change="checked2 = $event.detail.value" 
      />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      checked1: false,
      checked2: false
    }
  }
}
</script>

示例 3: 禁用状态

<template>
  <view class="container">
    <view class="switch-item">
      <text>可用开关</text>
      <switch :checked="checked" @change="handleChange" />
    </view>
    <view class="switch-item">
      <text>禁用开关</text>
      <switch :checked="checked" disabled />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      checked: false
    }
  },
  methods: {
    handleChange(e) {
      this.checked = e.detail.value
    }
  }
}
</script>

示例 4: 设置项列表

<template>
  <view class="container">
    <view 
      v-for="item in settings" 
      :key="item.key"
      class="setting-item"
    >
      <view class="setting-info">
        <text class="setting-title">{{ item.title }}</text>
        <text class="setting-desc">{{ item.desc }}</text>
      </view>
      <switch 
        :checked="item.value" 
        @change="handleSettingChange(item.key, $event.detail.value)"
      />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      settings: [
        {
          key: 'notify',
          title: '消息通知',
          desc: '接收新消息通知',
          value: true
        },
        {
          key: 'sound',
          title: '声音提醒',
          desc: '收到消息时播放声音',
          value: false
        },
        {
          key: 'vibrate',
          title: '震动提醒',
          desc: '收到消息时震动',
          value: true
        }
      ]
    }
  },
  methods: {
    handleSettingChange(key, value) {
      const item = this.settings.find(s => s.key === key)
      if (item) {
        item.value = value
        // 保存设置
        uni.setStorageSync(`setting_${key}`, value)
        console.log(`设置 ${key} 已更新为`, value)
      }
    }
  },
  onLoad() {
    // 加载保存的设置
    this.settings.forEach(item => {
      const saved = uni.getStorageSync(`setting_${item.key}`)
      if (saved !== '') {
        item.value = saved
      }
    })
  }
}
</script>

<style>
.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
}
.setting-info {
  flex: 1;
  margin-right: 20px;
}
.setting-title {
  display: block;
  font-size: 32rpx;
  color: #333;
  margin-bottom: 10rpx;
}
.setting-desc {
  display: block;
  font-size: 24rpx;
  color: #999;
}
</style>

属性说明

属性名	类型	默认值	说明
checked	Boolean	false	是否选中
disabled	Boolean	false	是否禁用
type	String	switch	样式类型，可选值：switch、checkbox
color	String	#007aff	switch 的颜色

平台兼容性

平台	支持情况
H5	✅
微信小程序	✅
支付宝小程序	✅
百度小程序	✅
字节跳动小程序	✅
QQ 小程序	✅
快手小程序	✅
App	✅
快应用	✅

注意事项

1. checked 属性控制开关状态
2. @change 事件返回 e.detail.value 为布尔值
3. 可以通过 color 自定义开关颜色
4. disabled 为 true 时开关不可操作

参考资源

• 官方文档: https://uniapp.dcloud.net.cn/component/switch.html