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

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

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

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

布局的约束

/*容器布局*/

.color_right_area {

margin-top:30rpx;

display: flex;

flex-direction: row;

align-items: center;

justify-content: space-around;

}

/*正常效果：圆形*/

.box {

width:45rpx;

height:45rpx;

border-radius:50%;

background-color: rebeccapurple;

}

/*选中效果：带边框*/

.is_checked {

width:47rpx;

height:47rpx;

border:2px solid;

}

/*按钮颜色样式*/

.color0 {

background-color:#d5243e;

}

.color1 {

background-color:#318ff4;

}

.color2 {

background-color:#f9a23f;

}

.color3 {

background-color:#000;

}

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

标签： 按钮颜色样式选中