微信小程序--多个按钮选中的联动效果

Posted 2023-04-18

参考技术A 场景：画图应用需选择画笔颜色，有4种颜色按钮可供选择，用户点击任意按钮进行颜色切换。
思路：通过curColorIndex变量保存当前选中的颜色下标，选中后添加额外的选中样式

一，canvas.wxss文件：这个文件用于定义按钮正常态和选中态的样式，以及Flex
布局的约束

二，canvas.wxml文件：这个文件是Demo的布局界面，通过使用js的data数据和wxss的class样式进行页面布局

这里通过wx：for实现循环打印颜色数组，通过curColorIndex值控制选中的样式，index值进行参数传递

三，canvas.js文件：提供数据，以及处理xwml的控件响应，并通过设置this.setData的值来更新xwml的显示

原文地址： http://www.jianshu.com/p/657e3b2a8aa4 http://www.jianshu.com/p/657e3b2a8aa4

微信小程序 按钮效果

参考技术A 在微信小程序中,自带的 button 是自带点击效果的,但是一旦我们给 button 加了 class 之后,这个按钮就变成了一个方块,点击也没有任何视觉效果.于是自己写了一套通用的小程序点击按钮效果

按钮样式