微信小程序实现多个按钮的颜色状态转换

本文实例为大家分享了微信小程序实现按钮颜色状态转换的具体代码，供大家参考，具体内容如下

效果图片：

index.wmxl文件

block wx : for=' { { pres } } ' view class=' foot _ tab ' data-id=' { { index } } ' style=' { { index==id ' ' color : RGB(91，207，97)' : ' color : # DDD ' } ' bind tap=' change color ' view class=' icon ' icon class=' icon font { { item }。img _ type } } '/icon/view view view { { item }。文本} }/视图/块索引。射流研究…文件

var id页面({ data : { pres : [{ img _ type : ' icon-Bao miua '，text: '电影}，{ img _ type : '图标-胡勇，text: '我的}]，id:0 }，changeColor:函数(e){ var id=e . CurrentTarget。数据集。id；this.setData({ id:id，})；}})index.wxss文件。页脚{宽度： 100%;高度： 50px位置：固定；bottom : 0pxdisplay : flex flex-direction : row；证明内容：空间环绕；边框-top: 1px纯色rgb(226，226，226)；} .foot _ tab { width: 40px高度： 50pxfont-size : 12pxdisplay : flex align-items :居中；弯曲方向：柱；} .图标{ width : 30px x8 : 30px/*背景-颜色： # CCC*/text-align:居中；}app.wxss

@ font-face { font-family : ' icon font '；/*项目id 794639 */src : URL('//at。alic dn。com/t/font _ 794639 _ 1j Yu 0 w 9 tzqh。eot’)；src : URL('//at。alicdn。com/t/font _ 794639 _ 1j Yu 0 w 9 tzqh。eot？#iefix ')格式(“embedded-opentype”)、网址(//at。alicdn。com/t/font _ 794639 _ 1jyu 0 w 9 tzqh。woff’)格式(' woff ')、URL(//at)。alicdn。com/t/font _ 794639 _ 1jyu 0 w 9 tzqh。'专题信托基金' '格式(“truetype”)、网址(//at。alicdn。com/t/font _ 794639 _ 1j Yu 0 w9 tzf’)}。图标字体{ font-family : '图标字体！重要；font-size :60 rpx字体样式：正常；-网络套件-字体-流畅：抗锯齿；-moz-OSX-字体-平滑：灰度；} .{ content : ' \ e622 '之前的icon-Bao miua :}.图标-勇u :前{内容： ' \ e600}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。