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


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 标题的自动翻转实现代码
Oct 14 Javascript
javascript分页代码(当前页码居中)
Sep 20 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
Jul 01 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
Nov 14 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
Feb 23 Javascript
使用javascript实现判断当前浏览器
Apr 14 Javascript
jQuery事件绑定与解除绑定实现方法
Apr 15 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 Javascript
简单实现js进度条加载效果
Mar 25 Javascript
Node.js静态服务器的实现方法
Feb 28 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
Aug 27 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
Dec 04 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更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
php中debug_backtrace、debug_print_backtrace和匿名函数用法实例
2014/12/01 PHP
浅谈php自定义错误日志
2015/02/13 PHP
php中mysql连接方式PDO使用详解
2015/02/25 PHP
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
js导航菜单(自写)简单大方
2013/03/28 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
2013/07/14 Javascript
IE6-8中Date不支持toISOString的修复方法
2014/05/04 Javascript
基于豆瓣API+Angular开发的web App
2015/01/02 Javascript
jquery插件jSignature实现手动签名
2015/05/04 Javascript
纯js代码实现简单计算器
2015/12/02 Javascript
JS动态增删表格行的方法
2016/03/03 Javascript
AngularJs Understanding the Model Component
2016/09/02 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
2016/09/05 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
2016/10/28 Javascript
Centos7 中 Node.js安装简单方法
2016/11/02 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
Nodejs 微信小程序消息推送的实现
2021/01/20 NodeJs
python3监控CentOS磁盘空间脚本
2018/06/21 Python
Python干货:分享Python绘制六种可视化图表
2018/08/27 Python
python爬取微信公众号文章
2018/08/31 Python
在Mac上删除自己安装的Python方法
2018/10/29 Python
Django如何自定义model创建数据库索引的顺序
2019/06/20 Python
python实现在cmd窗口显示彩色文字
2019/06/24 Python
pycharm new project变成灰色的解决方法
2019/06/27 Python
python实现桌面托盘气泡提示
2019/07/29 Python
html5给汉字加拼音加进度条的实现代码
2020/04/07 HTML / CSS
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
毕业证丢失证明
2014/01/15 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
工作态度怎么写
2015/06/25 职场文书
婚宴主持词
2015/06/30 职场文书