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

场景：画图应用需选择画笔颜色，有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

方法/步骤

打开微信小程序开发工具，打开已新建的或新建一个项目

请点击输入图片描述

新建一个页面文件wxml，插入一个radio-group，然后内嵌四个radio

请点击输入图片描述

保存代码并查看左侧模拟器，可以查看到一组单选按钮

请点击输入图片描述

在对应页面的JS文件中，定义单选按钮组change事件changeJa

请点击输入图片描隐判述

保存代码并打开内置浏览器控制台，点击单选按钮，查看打印结果

请点击输入图片描述

下载WeUI文件，然后将相关的样式文件拷贝进去，然后修改界面并调用样式类

请点击输入图片描述

再次保存代码拆携明并查看左侧模旅告拟器，可以看到单选按钮样式变成了按钮的样式

请点击输入图片描述

---