switch.uvue

<template>
  <view class="uni-padding-wrap">
    <view class="uni-common-mt">
      <view class="uni-title">默认样式</view>
      <view class="flex-row">
        <switch :checked="true" @change="switch1Change" />
        <switch @change="switch2Change" />
      </view>
      <view class="uni-title">不同颜色和尺寸的switch</view>
      <view class="flex-row">
        <switch color="#FFCC33" style="transform:scale(0.7)" :checked="true" />
        <switch color="#FFCC33" style="transform:scale(0.7)" />
      </view>
      <view class="uni-title">推荐展示样式</view>
    </view>
    <view class="uni-list">
      <view class="uni-list-cell uni-list-cell-pd">
        <view class="uni-list-cell-db">开启中</view>
        <switch :checked="true" />
      </view>
      <view class="uni-list-cell uni-list-cell-pd">
        <view class="uni-list-cell-db">关闭</view>
        <switch />
      </view>
    </view>
  </view>
</template>

<script lang="ts">
  export default {
    data() {
      return {
        title: 'switch 开关'
      }
    },
    methods: {
      switch1Change: function (e : SwitchChangeEvent) {
        console.log('switch1 发生 change 事件，携带值为', e.detail.value)
      },
      switch2Change: function (e : SwitchChangeEvent) {
        console.log('switch2 发生 change 事件，携带值为', e.detail.value)
      }
    }
  }
</script>

<style>
  .flex-row {
    flex-direction: row;
  }
</style>