开发指南
组件
- 起步
- 基础组件
- 表单组件
- 数据组件
- 反馈组件
- 布局组件
- 导航组件
- 其他组件
JS
- 开发指南
- 网络
- 工具库
模板
文章来源于网络收集而来,版权归原创者所有,如有侵权请及时联系!
Switch 开关选择器
Switch 开关选择器 平台差异说明
App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ |
基本使用
通过v-model
绑定一个布尔值
变量,这个变量是双向绑定的,当用户开或关选择器的时候,在父组件的该值也会相应的变为true
或者false
,也就是说, 您不用监听change
事件,也能知道选择器当前处于开或者关的状态。
<template>
<u-switch v-model="checked"></u-switch>
</template>
<script>
export default {
data() {
return {
checked: false,
};
},
methods: {
// switch打开或者关闭时触发,值为true或者false
// 即使不监听此事件,this.checked此时也会相应的变成true或者false
change(status) {
// console.log(status);
},
}
};
</script>
禁用switch
设置disabled
为true
,即可禁用某个组件,让用户无法点击,禁用分为两种状态:
- 一是关闭情况下的禁用,这时只显示一个白色的区域。
- 二是打开后再禁用,这时会在原有的颜色上加一个
opacity
透明度,但此时依然是不可操作的。
<u-switch v-model="checked" :disabled="true"></u-switch>
加载中
通过设置loading
变量为true
,可以让switch
处于加载中的状态,这时switch
是不可操作的
<u-switch v-model="checked" :loading="true"></u-switch>
<!-- 等价于 -->
<u-switch v-model="checked" loading></u-switch>
自定义颜色
<u-switch v-model="checked" active-color="red" inactive-color="#eee"></u-switch>
自定义值
可以通过设置active-value
和inactive-value
来控制选择器打开或者关闭时,通过change
事件发出的回调值。
<u-switch v-model="checked" active-value="1" inactive-value="0"></u-switch>
异步控制
这种场景,一般发生在用户打开或者关闭选择器时,需要本地或者向后端请求判断,是否允许用户打开或者关闭的场景。
- 假设原来是打开状态
- 您通过
watch
监听v-model
绑定的checked
变量,或者通过监听switch
的change
事件,得知checked
变量发生了变化 - 这时您可以通过设置
loading
为true
,同时将checked
值设置为true
(因为用户已关闭,这里让它重新打开,并处于加载中) - 等请求结束后,根据判断结果,把
checked
值设置为true
或者false
,同时去掉加载中状态(loading
设置为false
),让组件呈现最终的状态
- 假设原来处于关闭状态
处理方法同上,只不过对应的状态是反过来的
下面示例为原本是打开状态,用户把它关闭,我们通过异步控制的场景
注意
此处示例中,我们通过watch
监听checked
变量为false
的情景,在定时器模拟回调中又将checked
设置为false
,会造成无限循环,所以这里 引入了一个中间变量controlStatus
来识别
<template>
<u-switch v-model="checked" :loading="loading"></u-switch>
</template>
<script>
export default {
data() {
return {
checked: true,
loading: false,
// 中间变量,避免在watch中多次回调,造成无限循环
controlStatus: false
};
},
watch: {
checked(val) {
// 等于false,意味着用户手动关闭了switch
if (val == false) {
if(this.controlStatus == true) {
this.controlStatus = false;
return ;
}
// 重新打开switch,并让它处于加载中的状态
this.checked = true;
this.loading = true;
// 模拟向后端发起请求
this.getRestultFromServer();
}
}
},
methods: {
// switch打开或者关闭时触发,值为true或者false
change(status) {
// console.log(status);
},
getRestultFromServer() {
// 通过定时器模拟向后端请求
setTimeout(() => {
this.controlStatus = true;
// 后端允许用户关闭switch,设置checked为false,结束loading状态
this.loading = false;
this.checked = false;
}, 1500);
}
}
};
</script>
API
Switch Props
注意:需要给switch
组件通过v-model
绑定一个布尔值,来初始化switch
的状态,随后该值被双向绑定, 当用打开选择器时,该值在switch
组件内部被修改为true
,并反映到父组件,否则为false
,换言之,您无需监听switch
的change
事件,也能 知道某一个switch
是否被选中的状态
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
loading | 是否处于加载中 | Boolean | false | true |
disabled | 是否禁用 | Boolean | false | true |
size | 开关尺寸,单位rpx | String | Number | 50 | - |
active-color | 打开时的背景色 | String | #2979ff | - |
inactive-color | 关闭时的背景色 | String | #ffffff | - |
vibrate-short | 是否使手机发生短促震动,目前只在iOS的微信小程序和微信小程序开发工具有效 | Boolean | false | true |
active-value | 打开选择器时通过change事件发出的值 | Boolean | Number | String | true | |
inactive-value | 关闭选择器时通过change事件发出的值 | Boolean | Number | String | false |
Switch Event
事件名 | 说明 | 回调参数 |
---|---|---|
change | 在switch 打开或关闭时触发 | value:打开时为active-value 值,关闭时为inactive-value 值 |
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论