小程序自定义switch组件

最新推荐文章于 2021-12-15 09:47:04 发布

转载最新推荐文章于 2021-12-15 09:47:04 发布 · 1.6k 阅读

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000015564233

文章标签：

本文介绍了一种自定义的小程序Switch组件实现方法。由于小程序原生Switch组件仅支持颜色自定义，作者通过自定义样式实现了宽高可配置的Switch组件。文章详细说明了组件的设计思路及使用过程中遇到的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图片描述

如上图，小程序api中的switch组件只能自定义颜色，不能自定义宽高，所以就开始了自己写switch组件。

自定义组件样式
图片描述

switch组件样式大致如图，样式思路：未选中时为一个长方形有圆角按钮，和一个半径为长方形【（长方形高度／2）-1】的圆圈，当状态为选中时，圆圈向右滚动，滚动距离为【长方形宽度-长方形高度-1】,动画效果通过过渡属性来赋予的，控制圆圈的left值。

自定义组件构思
图片描述

从父组件传来值有：高度height，宽度width，选中时背景bgColor，未选中背景unBgColor，是否选中的状态值checked,宽高单位为rpx。

图片描述

定义了一个组件方法，点击时触发该方法执行，执行后要做的事情交给父组件来处理，并且传给父组件一个状态值，考虑到在真实情况下会进行http请求，所以传了一个请求成功时的回调和失败时的回调。

组件使用

图片描述

在写demo时发现一个问题：当checked值直接在wxml中写入false或者是true时状态都为true,只有在js中定义data值为false,才使得状态为false,具体原因不造，哪位大大要是知道原因，烦请告知。

！！！项目demo！！！
附链接：wechatide://minicode/ZErlcKmG79Em 在开发者工具中预览