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


Posted in Javascript onFebruary 15, 2019

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

效果图片:

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

 index.wmxl文件

<block wx:for="{{pres}}">
  <view class='foot_tab' data-id="{{index}}" style="{{index==id? 'color:rgb(91, 207, 97)':'color:#ddd'}}" bindtap='changeColor'>
  <view class="icon">
   <icon class="iconfont {{item.img_type}}"></icon>
  </view>
  <view>{{item.text}}</view>
  </view>
 </block>

index.js文件

var id;
Page({
 data: {
 pres: [{ img_type: 'icon-baomihua', text: '电影' }, { img_type:"icon-yonghu",text:'我的'}],
 id:0
 },changeColor: function(e){
 var id=e.currentTarget.dataset.id;
 this.setData({
  id:id,
 }); 
 }
})

index.wxss文件

.footer {
 width: 100%;
 height: 50px;
 position: fixed;
 bottom: 0px;
 display: flex;
 flex-direction: row;
 justify-content: space-around;
 border-top: 1px solid rgb(226, 226, 226);
}
 
.foot_tab {
 width: 40px;
 height: 50px;
 font-size: 12px;
 display: flex;
 align-items: center;
 flex-direction: column;
}
 
.icon {
 width: 30px;
 height: 30px;
 /* background-color: #ccc; */
 text-align: center;
}

app.wxss

@font-face {
 font-family: 'iconfont'; /* project id 794639 */
 src: url('//at.alicdn.com/t/font_794639_1jyu0w9tzqh.eot');
 src: url('//at.alicdn.com/t/font_794639_1jyu0w9tzqh.eot?#iefix') format('embedded-opentype'),
 url('//at.alicdn.com/t/font_794639_1jyu0w9tzqh.woff') format('woff'),
 url('//at.alicdn.com/t/font_794639_1jyu0w9tzqh.ttf') format('truetype'),
 url('//at.alicdn.com/t/font_794639_1jyu0w9tzqh.svg#iconfont') format('svg');
}
 
.iconfont {
 font-family:"iconfont" !important;
 font-size:60rpx;
 font-style:normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
 
.icon-baomihua:before{content: '\e622';}
.icon-yonghu:before{content: '\e600';}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
Feb 23 Javascript
jquery事件重复绑定的快速解决方法
Jan 03 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 Javascript
解决js下referer兼容各大浏览器的方法
Nov 03 Javascript
javascript面向对象之访问对象属性的两种方式分析
Jan 13 Javascript
学习AngularJs:Directive指令用法(完整版)
Apr 26 Javascript
jQuery事件委托之Safari
Jul 05 Javascript
小程序分享模块超级详解(推荐)
Apr 10 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
Apr 14 Javascript
js实现全选和全不选功能
Jul 28 Javascript
如何使用gpu.js改善JavaScript的性能
Dec 01 Javascript
用React Native制作一个简单的游戏引擎
May 27 Javascript
详解react-refetch的使用小例子
Feb 15 #Javascript
小程序实现多列选择器
Feb 15 #Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 #jQuery
微信实现自动跳转到用其他浏览器打开指定APP下载
Feb 15 #Javascript
微信小程序实现联动选择器
Feb 15 #Javascript
推荐一个基于Node.js的表单验证库
Feb 15 #Javascript
微信小程序实现左右列表联动
May 19 #Javascript
You might like
PHP中的Memcache详解
2014/04/05 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
php+mysql实现无限级分类
2015/11/11 PHP
PHP中addslashes()和stripslashes()实现字符串转义和还原用法实例
2016/01/07 PHP
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
php命令行模式代码实例详解
2021/02/26 PHP
js的闭包的一个示例说明
2008/11/18 Javascript
Javascript 匿名函数及其代码模式原理
2010/03/19 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
2011/03/28 Javascript
JS动态显示表格上下frame的方法
2015/03/31 Javascript
webpack教程之webpack.config.js配置文件
2017/07/05 Javascript
5分钟快速掌握JS中var、let和const的异同
2018/09/19 Javascript
vue使用Font Awesome的方法步骤
2019/02/26 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
2019/05/07 Javascript
JavaScript动态添加数据到表单并提交的几种方式
2019/06/26 Javascript
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
使用Python的Django框架结合jQuery实现AJAX购物车页面
2016/04/11 Python
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
python在每个字符后添加空格的实例
2018/05/07 Python
Tensorflow加载预训练模型和保存模型的实例
2018/07/27 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
美国在线打印网站:Overnight Prints
2018/10/11 全球购物
美津浓巴西官方网站:Mizuno巴西
2019/07/24 全球购物
业务部门经理岗位职责
2014/02/23 职场文书
商业项目策划方案
2014/06/05 职场文书
加强机关作风建设心得体会
2014/10/22 职场文书
《改造我们的学习》心得体会
2014/11/07 职场文书
妈妈别哭观后感
2015/06/08 职场文书
大学生干部培训心得体会
2016/01/06 职场文书
高二语文教学反思
2016/02/16 职场文书
Python中的matplotlib绘制百分比堆叠柱状图,并为每一个类别设置不同的填充图案
2022/04/20 Python
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python