摘要:如上图,小程序中的组件只能自定义颜色,不能自定义宽高,所以就开始了自己写组件。自定义组件构思从父组件传来值有高度,宽度,选中时背景,未选中背景,是否选中的状态值宽高单位为。
如上图,小程序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/96002.html
摘要:如上图,小程序中的组件只能自定义颜色,不能自定义宽高,所以就开始了自己写组件。自定义组件构思从父组件传来值有高度,宽度,选中时背景,未选中背景,是否选中的状态值宽高单位为。 showImg(https://segmentfault.com/img/bVbds1i?w=1744&h=926); 如上图,小程序api中的switch组件只能自定义颜色,不能自定义宽高,所以就开始了自己写sw...
摘要:如上图,小程序中的组件只能自定义颜色,不能自定义宽高,所以就开始了自己写组件。自定义组件构思从父组件传来值有高度,宽度,选中时背景,未选中背景,是否选中的状态值宽高单位为。 showImg(https://segmentfault.com/img/bVbds1i?w=1744&h=926); 如上图,小程序api中的switch组件只能自定义颜色,不能自定义宽高,所以就开始了自己写sw...
摘要:组件模板与组件数据结合后生成的节点树,将被插入到组件的引用位置上。事件用于子组件向父组件传递数据,可以传递任意数据。官方文档往期回顾填坑手册小程序生成海报一拆弹时刻小程序生成海报二 showImg(https://user-gold-cdn.xitu.io/2019/6/19/16b6e94bcde767a1?w=1069&h=652&f=jpeg&s=120912); 小程序目录结构...
阅读 1044·2021-09-22 15:19
阅读 1671·2021-08-23 09:46
阅读 2202·2021-08-09 13:47
阅读 1386·2019-08-30 15:55
阅读 1381·2019-08-30 15:55
阅读 1960·2019-08-30 15:54
阅读 2780·2019-08-30 15:53
阅读 694·2019-08-30 11:03