uniapp使用内置的switch组件的问题

说明

开关选择器

属性说明

属性名	类型	默认值	说明	平台差异说明
checked	Boolean	false	是否选中
disabled	Boolean	false	是否禁用	不支持：抖音小程序、飞书小程序
type	String	switch	样式 有效值：switch、checkbox
color	Color		switch的颜色，通css的color
@change	EventHandle		checked改变时触发change事件 event.detail={value:checked}

官方示例

<template>
	<view>
		<view class="uni-padding-wrap uni-common-mt">
			<view class="uni-title">默认样式</view>
			<view>
				<switch checked @change="switch1Change" />
				<switch @change="switch2Change" />
			</view>
			<view class="uni-title">不同颜色和尺寸的switch</view>
			<view>
				<switch checked color="#FFCC33" style="transform:scale(0.7)"/>
				<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 />
			</view>
			<view class="uni-list-cell uni-list-cell-pd">
				<view class="uni-list-cell-db">关闭</view>
				<switch />
			</view>
		</view>
	</view>
</template>
<script>
export default {
    data() {
        return {}
    },
    methods: {
        switch1Change: function (e) {
            console.log('switch1 发生 change 事件，携带值为', e.detail.value)
        },
        switch2Change: function (e) {
            console.log('switch2 发生 change 事件，携带值为', e.detail.value)
        }
    }
}
</script>

缺点

不能设置为响应式的大小

解决方案

使用uv-ui组件库里的Switch组件来代替官方内置的switch

uv-switch

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

平台兼容性

props

• 注意：需要给switch组件通过v-model绑定一个布尔值，来初始化switch的状态，随后该值被双向绑定， 当用打开选择器时，该值在switch组件内部被修改为true，并反映到父组件，否则为false。换言之，您无需监听switch的change事件，也能 知道某一个switch是否被选中的状态。
• v-model绑定的值必须为inactiveValue、activeValue二者之一，且inactiveValue和activeValue的值不能相等。

参数	说明	类型	默认值	可选值
v-model	双向绑定的值 注意：这里只能使用v-model，不能使用 :value	Boolean String Number	false
loading	是否处于加载状态	Boolean	false	true | false
disabled	是否禁用	Boolean	false	true | false
size	开关尺寸	String  Number	25
activeColor	打开时的背景色	String	#2979ff
inactiveColor	关闭时的背景色	String	#ffffff
activeValue	switch打开时的值	Boolean String Number	true
inactiveValue	switch关闭时的值	Boolean String Number	false
asyncChange	是否开启异步变更，开启后需要手动控制输入值	Boolean	false	true | false
space	圆点与外边框的距离	String Number	0

Event

事件名	说明	回调参数
@change	在switch打开或关闭时触发	value：打开时为activeValue值，关闭时为inactiveValue值
@input	在switch打开或关闭时触发（没开启异步）	value：打开时为activeValue值，关闭时为inactiveValue值

自定义尺寸使用

设置size属性，可以让您自定义switch的尺寸，可自定义单位。

<template>
	<view>
		<uv-switch v-model="value" size="28"></uv-switch>
		<uv-switch v-model="value2" size="20"></uv-switch>
		<uv-switch v-model="value2" size="30rpx"></uv-switch>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				value: false,
				value2: true
			}
		}
	};
</script>

更多使用方式可以前往uv-ui的官网查看：Switch 开关选择器 | 我的资料管理-uv-ui 是全面兼容vue3+2、nvue、app、h5、小程序等多端的uni-app生态框架 (uvui.cn)https://www.uvui.cn/components/switch.html