java switch小程序,小程序自定义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 在开发者工具中预览

java switch小程序,小程序自定义switch组件相关推荐

微信小程序，自定义switch组件
在我看来这个主要是样式,相当于自己重新写一个switch样式,下面直接看源码目录结构 switch.wxml <view class="switch"><vie ...
用JAVA写一个画图小程序（JAVA 大作业）
第一次写博客且是稍微大点的程序看看就行重新写的在这,更加清晰明了:点击进入:用JAVA写一个画图小程序(JAVA 大作业)重排版本设计思路首先我直接去了Windows自带画图程序去实践模拟, ...
Java多功能计算器小程序
Java多功能计算器小程序(附界面) 早期写的计算器,现在看来还是挺粗糙的,各个控件应该用数组来初始化和排版,懒得改凑合看吧.功能挺全的,求根加减乘除百分制删除清空,和实体简易计算器几乎一致 pack ...
小程序自定义开关组件
写在前:想自己写一个开关switch 如下图:并写成组件首先,根据小程序文档提供的自定义组件:可以新建一个文件夹包括: json wxss wxml js 四个文件 ...
微信小程序自定义日历组件
微信小程序自定义日历组件 wxml <view class="maskWrap" bindtap="close"></view>< ...
java springboot分销商城小程序源码
java分销商城微信小程序后台采用springboot + mybatis 前后分离 resetful接口前台bootstrap + vue.js 适合二次开发主要功能首先,登陆小程序后台,在 ...
java 怎么让一个jlabel和一个jtextfield在一行_今天小哥大家分享一下Java编程语言的第一个程序应该怎么样去写...
哈喽,各位朋友们大家周六好!我是你们的老朋友90小哥爱数码! 那么,今天小哥要和大家伙儿分享这篇文章的主要内容依然是和Java编程语言有关系,大家都知道在上几篇的文章当中呢小哥分别给大家介绍了Java ...
小程序如何封装自定义组件（Toast）
1.创建和pages 同级的component目录新建一个myToast目录例如: 2.myToast.wxml文件内容:  <!-- nam ...
小程序分享如何自定义封面？
小程序分享如何自定义封面? onShareAppMessage(options) 在 Page 中定义 onShareAppMessage 函数,设置该页面的转发信息. 只有定义了此事件处理函数,右上 ...

java switch小程序,小程序自定义switch组件

java switch小程序,小程序自定义switch组件相关推荐

最新文章

热门文章