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


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 相关文章推荐
javascript函数中的arguments参数
Aug 01 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
Mar 27 Javascript
详解JavaScript的变量和数据类型
Nov 27 Javascript
JavaScript学习笔记整理之引用类型
Jan 22 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
Mar 16 Javascript
一个简单不报错的summernote 图片上传案例
Jul 11 Javascript
Asp.Net之JS生成分页条的方法
Nov 23 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
Feb 15 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
Mar 09 Javascript
如何能分清npm cnpm npx nvm
Jan 17 Javascript
微信小程序图片加载失败时替换为默认图片的方法
Dec 09 Javascript
JS实现横向轮播图(中级版)
Jan 18 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
windows环境下php配置memcache的具体操作步骤
2013/06/09 PHP
常用简易JavaScript函数
2009/04/09 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
2011/08/23 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
IE中的File域无法清空使用jQuery重设File域
2014/04/24 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
2015/10/22 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
2016/10/21 Javascript
AngularJS中如何使用echart插件示例详解
2016/10/26 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
JS中检测数据类型的几种方式及优缺点小结
2016/12/12 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
2017/10/30 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
webpack开发环境和生产环境的深入理解
2018/11/08 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
2019/05/14 Javascript
一起深入理解js中的事件对象
2021/02/06 Javascript
Python 常用string函数详解
2016/05/30 Python
Python编程中实现迭代器的一些技巧小结
2016/06/21 Python
深入浅析Python中join 和 split详解(推荐)
2016/06/30 Python
Python多线程同步---文件读写控制方法
2019/02/12 Python
Python函数参数匹配模型通用规则keyword-only参数详解
2019/06/10 Python
python3 deque 双向队列创建与使用方法分析
2020/03/24 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
浅谈python 类方法/静态方法
2020/09/18 Python
python 如何停止一个死循环的线程
2020/11/24 Python
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
2014/09/02 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
2013/08/06 HTML / CSS
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
2019/09/09 HTML / CSS
Whistles官网:英国女装品牌
2020/08/14 全球购物
精选干货:Java精选笔试题附答案
2014/01/18 面试题
将相和教学反思
2014/02/04 职场文书
运动会通讯稿500字
2014/02/20 职场文书
幼儿园托班开学寄语(2015秋季)
2015/05/27 职场文书
2015秋季小学开学寄语
2015/05/27 职场文书
MySQL悲观锁与乐观锁的实现方案
2021/11/02 MySQL