• switch

    switch

    开关选择器。

    属性说明

    属性名类型默认值说明平台差异说明
    checkedBooleanfalse是否选中
    disabledBooleanfalse是否禁用头条小程序不支持
    typeStringswitch样式，有效值：switch, checkbox
    @changeEventHandlechecked 改变时触发 change 事件，event.detail={ value:checked}
    colorColorswitch 的颜色，同 css 的 color

    示例

    1. <template>
    2.     <view>
    3.         <view class="uni-padding-wrap uni-common-mt">
    4.             <view class="uni-title">默认样式</view>
    5.             <view>
    6.                 <switch checked @change="switch1Change" />
    7.                 <switch @change="switch2Change" />
    8.             </view>
    9.             <view class="uni-title">推荐展示样式</view>
    10.         </view>
    11.         <view class="uni-list">
    12.             <view class="uni-list-cell uni-list-cell-pd">
    13.                 <view class="uni-list-cell-db">开启中</view>
    14.                 <switch checked />
    15.             </view>
    16.             <view class="uni-list-cell uni-list-cell-pd">
    17.                 <view class="uni-list-cell-db">关闭</view>
    18.                 <switch />
    19.             </view>
    20.         </view>
    21.     </view>
    22. </template>
    1. export default {
    2.     data() {
    3.         return {}
    4.     },
    5.     methods: {
    6.         switch1Change: function (e) {
    7.             console.log('switch1 发生 change 事件，携带值为', e.target.value)
    8.         },
    9.         switch2Change: function (e) {
    10.             console.log('switch2 发生 change 事件，携带值为', e.target.value)
    11.         }
    12.     }
    13. }

    uniapp

    示例代码说明：以上示例代码从hello uni-app示例中复制，涉及的css样式在hello uni-app的app.vue和uni.css中

    预览H5效果：使用浏览器的手机模式访问https://uniapp.dcloud.io/h5/pages/component/switch/switch

    注意

    • switch的默认颜色，在不同平台不一样。微信小程序是绿色的，头条小程序为红色，其他平台是蓝色的。更改颜色使用color属性。
    • 如需调节switch大小，可通过css的scale方法调节，如缩小到70%style="transform:scale(0.7)"

    发现错误？想参与编辑？在 GitHub 上编辑此页面！