小程序switch内部加上文字_干货 | 微信小程序教程：写一个能自定义尺寸、样式的switch...

2024-04-12 22:10:58

小程序原生的switch不能灵活的修改宽高、样式，很不方便，我这边参考 WeUI 的开关，写了一个可以自定义尺寸样式的switch组件。

直接上代码： https://gitee.com/piscdong/we...

效果如下图，可以自定义宽高，可以做成方角的

代码分析

这个switch主要的难点就是点击后背景颜色变换的动画，这里用到了css的transition、transform两个属性来实现动画，以及::before和::after两个伪元素。

wxml基本结构为：

<view class="switch"><view></view>
</view>

父级view是整个switch容器，会用到::before做背景色切换动画，::after做禁用时的灰色遮罩。内部的一个view是来回切换的白点。未选中时默认class是switch，选中时增加一个class：switch_checked。

选中状态到未选中状态背景有一个从中间变大到全部的白色动画，所以需要给父级view设置一个颜色作为背景色。

.switch {...background: #00c000;position: relative;
}

未选中时::before覆盖整个容器，选中时::before设置 transform: scale(0); ，这样选中时白色区域就会缩放到最小，再加上transition的实现动画效果。

.switch::before {display: block;content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;border-radius: 9999rpx;background: #fff;transition: all 0.35s cubic-bezier(0.45, 1, 0.4, 1);
}.switch_checked::before {transform: scale(0);
}

来回移动的白点，未选中时通过 left: 0; 定位到左侧，选中时将left设置为100%定位到右侧，但是这样白点会完全移出容器范围，所以还需要加上 transform: translateX(-100%); 将白点向左再一定自身宽度的100%，同样加上transition的实现动画效果。

.switch view {position: absolute;top: 0;left: 0;width: 60rpx;height: 60rpx;border-radius: 50%;background: #fff;box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.4);transition: all 0.35s cubic-bezier(0.45, 1, 0.4, 1);
}.switch_checked view {left: 100%;transform: translateX(-100%);
}

关于“::”

最后搭车说一下“:”和“::”，“:”是伪类，“::”是伪元素。按照我的理解：伪类不会在dom中增加节点，只不过是css选择器的一种特殊效果；伪元素会增加节点，flex布局中会影响到其他元素。

为了保证兼容性，css3是允许伪元素使用单个冒号。

原文作者：Rolan

原文链接：http://www.wxapp-union.com/article-5753-1.html

小程序switch内部加上文字_干货 | 微信小程序教程：写一个能自定义尺寸、样式的switch...相关推荐

小程序switch内部加上文字_文字游戏大全：模拟游戏会长经营公会的小程序，你会管理公会吗？...
40000+游戏爱好者已加入我们! 每天推荐好玩游戏! 加入我们,沐沐带你发现好游戏! <游戏会长>游戏小程序好玩吗? <游戏会长>小游戏怎么玩? 只有你想不到, 没有我找不到 ...
小程序switch内部加上文字_假王子恋爱手册2：女生向文字恋爱游戏小程序！女扮男装日记！...
沐沐带你发现好游戏! 只有你想不到, 没有我找不到的好游戏! 「良心好游戏推荐」搜罗了好玩的微信小游戏大全, 模拟经营游戏.恐怖游戏.消除游戏.休闲游戏. 益智游戏.吃鸡游戏.烧脑游戏.解谜游戏大全 ...
小程序switch内部加上文字_还愿师游戏小程序：这个女性向文字游戏有点意思！游戏结局居然......
40000+游戏爱好者已加入我们! 每天推荐好玩游戏! 加入我们,沐沐带你发现好游戏! <还愿师>游戏小程序好玩吗? <还愿师>小游戏怎么玩? 只有你想不到, 没有我找不到的好 ...
小程序switch内部加上文字_Switch每日情报：国行版《健身环大冒险》微信小程序上线...
1.任天堂<跳跃之王>预定12月27日登PS4及Switch Pikii 合同会社决定将在2020 年12 月17 日(四)发售Nintendo SwitchTM 及PlayStation ...
python 自动化微信小程序_干货 | 微信小程序自动化测试最佳实践（附 Python 源码）...
原标题:干货 | 微信小程序自动化测试最佳实践(附 Python 源码) 本文为霍格沃兹测试学院测试大咖公开课<微信小程序自动化测试>图文整理精华版. 随着微信小程序的功能和生态日益完善, ...
微信小程序 python 渲染_干货 | 微信小程序自动化测试最佳实践（附 Python 源码）...
本文为霍格沃兹测试学院测试大咖公开课<微信小程序自动化测试>图文整理精华版,进阶学习文末加群! 随着微信小程序的功能和生态日益完善,很多公司的产品业务形态逐渐从 App 延升到微信小程序. ...
微信小程序python自动化测试_干货 | 微信小程序自动化测试最佳实践（附 Python 源码）...
本文为霍格沃兹测试学院测试大咖公开课<微信小程序自动化测试>图文整理精华版. 随着微信小程序的功能和生态日益完善,很多公司的产品业务形态逐渐从 App 延升到微信小程序.微信公众号等.小程 ...
微信小程序推送消息java开发_干货 | 微信小程序推送消息简单Demo
在开始前,你需要准备:注册微信小程序一个简单的springBoot 项目微信开发者工具正式微信小程序发送消息主要通过WxMaTemplateMessage 类来推送 public class ...
微信小程序开发分销制度济南_花店微信小程序开发教程
如何将自己的鲜花商品快速配送出去,避免鲜花过期浪费,是很多传统花店商家的难题.不过随着微信小程序的出现,这一难题也渐渐得到了解决.花店商家可以通过自己的小程序商城,打通线上渠道,可以加大推广.扩大销量 ...
微信小程序网络请求异常怎么办_解决·微信小程序开发-网络请求报Invalid request 400错误...
今天学习了一下微信小程序的入门开发,在使用网络请求时,发现根据微信官方的API的方法进行操作出现Invalid request 400错误,到底怎么回事呢? 首先我们来看微信API网络请求示例代码: ...

最新文章

热门文章