場(chǎng)景：畫圖應(yīng)用需選擇畫筆顏色，有4種顏色按鈕可供選擇，用戶點(diǎn)擊任意按鈕進(jìn)行顏色切換。 
思路：通過curColorIndex變量保存當(dāng)前選中的顏色下標(biāo)，選中后添加額外的選中樣式

一，canvas.wxss文件：這個(gè)文件用于定義按鈕正常態(tài)和選中態(tài)的樣式，以及Flex

布局的約束

1. /*容器布局*/
2. .color_right_area {
3. margin-top: 30rpx;
4. display: flex;
5. flex-direction: row;
6. align-items: center;
7. justify-content: space-around;
8. }
9. /*正常效果：圓形*/
10. .box {
11. width: 45rpx;
12. height: 45rpx;
13. border-radius: 50%;
14. background-color: rebeccapurple;
15. }
16. /*選中效果：帶邊框*/
17. .is_checked {
18. width: 47rpx;
19. height: 47rpx;
20. border: 2px solid;
21. }
22. /*按鈕顏色樣式*/
23. .color0 {
24. background-color: #d5243e;
25. }
26. .color1 {
27. background-color: #318ff4;
28. }
29. .color2 {
30. background-color: #f9a23f;
31. }
32. .color3 {
33. background-color: #000;
34. }

二，canvas.wxml文件：這個(gè)文件是Demo的布局界面，通過使用js的data數(shù)據(jù)和wxss的class樣式進(jìn)行頁面布局

1. class="color_right_area">
2. class='color_right_area' wx:for='{{data_color}}' wx:key='id'>
3. class="box color{{index}} {{curColorIndex==index?'is_checked':'color{{index}}'}}" bindtap="colorSelect" data-param='{{index}}'>
4.  
5.  

這里通過wx：for實(shí)現(xiàn)循環(huán)打印顏色數(shù)組，通過curColorIndex值控制選中的樣式，index值進(jìn)行參數(shù)傳遞

三，canvas.js文件：提供數(shù)據(jù)，以及處理xwml的控件響應(yīng)，并通過設(shè)置this.setData的值來更新xwml的顯示

1. Page({
2. data: {
3. curColorIndex:0,
4. data_color: [],
5. },
6. //更改畫筆顏色的方法
7. colorSelect: function (e) {
8. let curIndex = parseInt(e.currentTarget.dataset.param)
9. this.setData({
10. curColorIndex: curIndex
11. });
12. },
13. onLoad: function () {
14. let init_color = [
15. '#d5243e',
16. '#318ff4',
17. '#f9a23f',
18. '#ffffff'
19. ]
20. this.setData({ data_color: init_color})
21. }
22. })

onLoad:function這個(gè)函數(shù)在頁面加載時(shí)就會(huì)執(zhí)行一次，所以這里可以加載默認(rèn)顏色數(shù)據(jù)，同時(shí)wxml用到了curColorIndex以及data_color，所以在data里定義。