手机版

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

时间:2021-08-27 来源:互联网 编辑:宝哥软件园 浏览:

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

效果图片:

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}以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

版权声明:微信小程序实现多个按钮的颜色状态转换是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。