mx-switch 滑块

用于在打开和关闭状态之间进行切换。

引入

在app.json或index.json中引入组件，详细介绍见快速上手

"usingComponents": {
  "mx-switch": "/miniprogram_npm/m-ui/mx-switch/index"
}

小程序码

可使用微信扫码查看小程序码

#

代码演示

基本用法

<mx-switch checked="{{ checked }}" bind:change="onChange" />

Page({
  data: {
    checked: true,
  },

  onChange({ detail }) {
    // 需要手动对 checked 状态进行更新
    this.setData({ checked: detail });
  },
});

禁用状态

<mx-switch checked="{{ checked }}" disabled />

加载状态

<mx-switch checked="{{ checked }}" loading />

自定义大小

<mx-switch checked="{{ checked }}" size="24px" />

自定义颜色

<mx-switch
  checked="{{ checked }}"
  active-color="#07c160"
  inactive-color="#ee0a24"
/>

异步控制

<mx-switch checked="{{ checked }}" bind:change="onChange" />

Page({
  data: {
    checked: true,
  },

  onChange({ detail }) {
    wx.showModal({
      title: '提示',
      content: '是否切换开关？',
      success: (res) => {
        if (res.confirm) {
          this.setData({ checked2: detail });
        }
      },
    });
  },
});

API

Props

参数	说明	类型	默认值
name	在表单内提交时的标识符	string	-
checked	开关选中状态	any	false
loading	是否为加载状态	boolean	false
disabled	是否为禁用状态	boolean	false
size	开关尺寸	string	30px
active-color	打开时的背景色	string	#267AFF
inactive-color	关闭时的背景色	string	#8A8A8F
active-value	打开时的值	any	true
inactive-value	关闭时的值	any	false

Event

事件名	说明	参数
bind:change	开关状态切换回调	event.detail: 是否选中开关

外部样式类

名称	说明
custom-class	根节点样式类
node-class	圆点样式类