资讯专栏INFORMATION COLUMN

小程序自定义switch组件

Little_XM / 1948人阅读

摘要:如上图,小程序中的组件只能自定义颜色,不能自定义宽高,所以就开始了自己写组件。自定义组件构思从父组件传来值有高度,宽度,选中时背景,未选中背景,是否选中的状态值宽高单位为。

如上图,小程序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 在开发者工具中预览

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/116834.html

相关文章

  • 程序定义switch组件

    摘要:如上图,小程序中的组件只能自定义颜色,不能自定义宽高,所以就开始了自己写组件。自定义组件构思从父组件传来值有高度,宽度,选中时背景,未选中背景,是否选中的状态值宽高单位为。 showImg(https://segmentfault.com/img/bVbds1i?w=1744&h=926); 如上图,小程序api中的switch组件只能自定义颜色,不能自定义宽高,所以就开始了自己写sw...

    icyfire 评论0 收藏0
  • 程序定义switch组件

    摘要:如上图,小程序中的组件只能自定义颜色,不能自定义宽高,所以就开始了自己写组件。自定义组件构思从父组件传来值有高度,宽度,选中时背景,未选中背景,是否选中的状态值宽高单位为。 showImg(https://segmentfault.com/img/bVbds1i?w=1744&h=926); 如上图,小程序api中的switch组件只能自定义颜色,不能自定义宽高,所以就开始了自己写sw...

    coolpail 评论0 收藏0
  • 程序定义switch组件

    摘要:如上图,小程序中的组件只能自定义颜色,不能自定义宽高,所以就开始了自己写组件。自定义组件构思从父组件传来值有高度,宽度,选中时背景,未选中背景,是否选中的状态值宽高单位为。 showImg(https://segmentfault.com/img/bVbds1i?w=1744&h=926); 如上图,小程序api中的switch组件只能自定义颜色,不能自定义宽高,所以就开始了自己写sw...

    aaron 评论0 收藏0
  • 程序采坑记

    摘要:小程序采坑记上手小程序两个月,多多少少遇到一些坑,在此简单地作下总结。但一些人可能会遇过这种情况已知小程序组件默认高度,如果子元素高度过高,不会自适应高度。但实际上真是这样吗其实小程序的组件表现挺奇怪的。擅长微信小程序开发,系统管理后台。 小程序采坑记 上手小程序两个月,多多少少遇到一些坑,在此简单地作下总结。希望能对那些跟我一样有遇到过同样问题的人提供一点帮助,避免掉进这些坑,少走一...

    miya 评论0 收藏0
  • [填坑手册]程序目录结构和component组件使用心得

    摘要:组件模板与组件数据结合后生成的节点树,将被插入到组件的引用位置上。事件用于子组件向父组件传递数据,可以传递任意数据。官方文档往期回顾填坑手册小程序生成海报一拆弹时刻小程序生成海报二 showImg(https://user-gold-cdn.xitu.io/2019/6/19/16b6e94bcde767a1?w=1069&h=652&f=jpeg&s=120912); 小程序目录结构...

    myshell 评论0 收藏0

发表评论

0条评论

Little_XM

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<