小程序自定义switch组件
如上图,小程序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 在开发者工具中预览
小程序自定义switch组件的更多相关文章
- 微信小程序自定义音频组件,自定义滚动条,单曲循环,循环播放
小程序自定义音频组件,带滚动条 摘要:首先自定义音频组件,是因为产品有这样的需求,需要如下样式的 而微信小程序API给我们提供的就是这样的 而且产品需要小程序有后台播放功能,所以我们不考虑小程序的 a ...
- 小程序的switch组件
小程序的switch开关组件,总结下大概有三种使用场景. 其一: 纯展示场景, 用来展示某个开关值是打开还是关闭的,这个场景比较简单,给个disabled属性就ok了: 其二: 用户点击后立即切换开关 ...
- 微信小程序 自定义导航组件 nav头部 全面屏设计
nav-dynamic 微信小程序自定义nav头部组件:适配全面屏设计: 实现功能 初始进入页面时,展示初始状态下的nav样式: 页面滚动时,监听页面滚动事件,展示滚动状态下的nav样式: 根据配置字 ...
- 微信小程序——自定义图标组件
字体图标在网页中非常常见了.为了方便在小程序里面重复使用,自定义了一个图标组件,方便控制它的大小,颜色,自定义点击事件. 自定义图标组件的代码如下: 下面的代码是icon文件夹下面的4个文件 inde ...
- 微信小程序 - 自定义components组件详解A篇
官网API:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html 自定义 ...
- 微信小程序 - 自定义switch切换(示例)
点击下载:switch示例 ,适用于表单,官方switch 说明 .
- 微信小程序 - 自定义弹窗组件
2019-01-06:简化了一些代码,以及增加了可用性. // 弹窗配置 dialogConfig: { // 弹窗 dialogvisible: false, options: { // 显示关闭按 ...
- 百度小程序自定义通用toast组件
百度小程序Toast组件 author: @TiffanysBear 百度小程序自定义通用toast组件 BdToast百度小程序自定义通用组件-github地址 需求 手百小程序的toast仅支持在 ...
- 百度智能小程序弹窗组件wcPop|智能小程序自定义model弹窗模板
百度智能小程序自定义弹窗组件wcPop|百度小程序model对话框|智能小程序弹窗界面模板 最近百度也推出了自己的智能小程序,如是就赶紧去试了下,官方提供的api还不是狠完整.而且官方提供的弹窗组件也 ...
随机推荐
- 为什么java的接口的方法是public abstract修饰?为什么属性是public static final 修饰?
为什么java的接口的方法是public abstract修饰? 1.首先要明白接口的定义和作用是什么: 接口定义:接口是一个全部由抽象方法组成的集合,里面都是抽象方法和常量,用interface修 ...
- ipv6 mac地址转化为linklocal地址
mac 3c:32:66:67:dd:46 linklocal地址 前六位固定 fe80:: 第七位 mac地址第一个byte进行如下计算 (byte) ((byte) (macbyte &am ...
- 通过 WMI 返回硬盘序列号的一点小问题
通过 SELECT * FROM Win32_PhysicalMedia 可以返回硬盘序列号,但是在实际使用中某些情况下(原因未知)返回的 SerialNumber 是实际硬盘序列号的字符串按字符Ur ...
- IDEA+selenium3+火狐/谷歌驱动 JAVA初步环境搭建 笔记
0 环境 系统环境:win7 selenium驱动 谷歌浏览器以及驱动 火狐浏览器以及驱动 1 驱动地址的下载 1.1 selenium jar包 https://www.seleniumhq.org ...
- 基于phathomjs token 不定时无响应问题排查
问题描述 基于phathomjs的token池项目,基本原理是,打开淘宝页,获取匿名cookie,再由cookie中提取有效token,调用方通过该token获取淘宝数据 为方便基他人应用,封装了部分 ...
- VSTO开发Excel 2013/2016工作簿项目
范例下载:(下载后直接双击扩展名为.vsto的文件,或者双击扩展名为.xlsx的工作簿,按提示操作) ExcelWorkbook_Everything.rar
- MIO、EMIO、AXI_GPIO区别与联系
https://blog.csdn.net/u014485485/article/details/78141594 点灯实验
- Oracle 10G 服务端的升级
第一步:备份 rman target / backup full database plus archivelog; 第二步:升级 解压升级包到soft目录下,修改所有者 chown -R oracl ...
- java异常分析;剖析printStackTrace和fillInStackTrace
Java异常的栈轨迹(Stack Trace) 捕获到异常时,往往需要进行一些处理.比较简单直接的方式就是打印异常栈轨迹Stack Trace.说起栈轨迹,可能很多人和我一样,第一反应就是printS ...
- 赫夫曼解码(day17)
思路: 传入map(字节与对应字节出现的次数)和最后生成的要传送的字节.将他们先转换成对应的二进制字节,再转换成原来的字符串. 代码: 12345678910111213141516171819202 ...