話不多說，先看效果圖：

下面直接貼程式碼：

wxml:

<!-- 選擇顏色 --> < view class= "Choosecolor"> < view class= "colortext">選擇顏色 </ view > < view class= "colorview"> < view class= "{{curIndex==index ?'itemview':'itemviewss'}}" bindtap= "ChooseColor" data-item= "{{item}}" data-index= "{{index}}" wx:for= "{{color}}">{{item.color}} </ view > </ view > </ view > < text >你選的是：{{title}} </ text >

css:

/* 選擇顏色 */ .Choosecolor { width: 94%; margin: 0 auto; border-radius: 15 rpx; padding-bottom: 25 rpx; background-color: white; } .colortext { width: 100%; font-size: 32 rpx; font-family: 微軟雅黑; text-align: center; padding: 25 rpx 0 0 0; } .colorview { width: 100%; display: flex; flex-wrap: wrap; } .itemview { width: 200 rpx; height: 75 rpx; margin-left: 25 rpx; margin-top: 25 rpx; text-align: center; line-height: 75 rpx; font-size: 30 rpx; font-family: 微軟雅黑; background-color: #dbf5fe; border: 2 rpx #1bb6ea solid; border-radius: 10 rpx; } .itemviewss { width: 200 rpx; height: 75 rpx; margin-left: 25 rpx; margin-top: 25 rpx; text-align: center; line-height: 75 rpx; font-size: 28 rpx; font-family: 微軟雅黑; background-color: white; border: 2 rpx #efeff4 solid; border-radius: 10 rpx; }

js；

Page({
data: { itemview: false, color: [ { color: "紅色" }, { color: "橙色" }, { color: "黃色" }, ] },
ChooseColor: function (res) { var that = this console.log( "你選的是：", res.target.dataset.item.color) var index = res.target.dataset.index console.log(index, "index index ") console.log(that.data.itemview, "that.data.itemview ")
if (that.data.itemview == false) { that.setData({ itemview: true, }) } else { that.setData({ itemview: false }) } that.setData({ curIndex: index, title: res.target.dataset.item.color }) },

})