<switch class="switch-box" color="#54BBF7" :checked="checked" @change="change" />
.switch-box {
background-color: #4a8c7d;
}
w***@163.com
- 发布：2026-01-19 11:51
- 更新：2026-01-19 15:38
- 阅读：148
产品分类： uniapp/App
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： 15.3.2
HBuilderX类型： 正式
HBuilderX版本号： 4.66
手机系统： iOS
手机系统版本号： iOS 18
手机厂商： 模拟器
手机机型： 16 Pro Max
页面类型： vue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
操作步骤：
预期结果：
开关 (Switch)组件内部右侧不要有padding。
开关 (Switch)组件内部右侧不要有padding。
实际结果：
开关 (Switch)组件内部右侧有个小小的padding。
开关 (Switch)组件内部右侧有个小小的padding。
bug描述：
开关 (Switch)组件内部右侧有个小小的padding。我设置了绿色的背景色，看的比较清楚。
在微信小程序，app端都有这个问题。
该bug反馈内容不完整：缺少关键代码示例，仅描述"正常使用switch"过于模糊，无法准确复现问题；未说明具体padding值或提供截图佐证。分类信息较完整，包含HBuilderX 4.66、iOS 18模拟器等必要环境信息。
经核查知识库，uni-app的switch组件在不同平台默认样式存在差异（文档说明），且历史版本中Web平台曾调整过背景色（更新日志）。当前反馈的iOS平台padding问题可能属于平台渲染特性，而非组件缺陷。用户使用HBuilderX 4.66非最新版（当前正式版已更新至4.87+），建议先升级工具并检查是否仍存在此问题。
预期结果合理，但实际现象需区分是组件设计留白还是真实异常。uni-app的switch组件默认包含视觉间距设计，可能被用户误认为多余padding。建议用户提供完整代码示例，并参考组件规范确认是否符合设计预期。若确属异常，需补充具体padding数值及对比截图以便进一步验证。
内容为 AI 生成，仅供参考
DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题，如果艾特我没看到，请主动私信
此为微信小程序设计如此，app 对此进行了对齐。你可创建微信小程序原生应用，验证写法，参考下面代码
<view style="border: 1px solid red;">
<switch class="switch-box data-v-57280228" color="#54BBF7" ></switch>
</view>在微信小程序中表现为右侧有间隙，此问题不是 bug
-
w***@163.com (作者)
验证了下，原生小程序是这样，那就是微信小程序的switch有bug，我要去反馈一下。奇怪的是在iOSapp上看的效果也是右侧有间隙。
2026-01-22 15:29
-
