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


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 前的按键判断代码
Mar 19 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
Nov 19 Javascript
原生js实现图片层叠轮播切换效果
Feb 02 Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 Javascript
JavaScript中的Number数字类型学习笔记
May 26 Javascript
jQuery插件扩展实例【添加回调函数】
Nov 26 Javascript
微信小程序教程系列之视图层的条件渲染(10)
Apr 19 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
Aug 08 Javascript
Vue自定义指令使用方法详解
Aug 21 Javascript
vue服务端渲染的实例代码
Aug 28 Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 Javascript
js实现滑动滑块验证登录
Jul 24 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
基于mysql的bbs设计(三)
2006/10/09 PHP
ThinkPHP模板标签eq if 中区分0,null,false的方法
2017/03/24 PHP
Laravel 自带的Auth验证登录方法
2019/09/30 PHP
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
非常棒的10款jQuery 幻灯片插件
2011/06/14 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
2014/02/21 Javascript
浅谈JavaScript字符集
2014/05/22 Javascript
浅谈js 闭包引起的内存泄露问题
2015/06/22 Javascript
laypage分页控件使用实例详解
2016/05/19 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
2016/12/08 Javascript
JavaScript中日常收集常见的10种错误(推荐)
2017/01/08 Javascript
微信小程序canvas绘制圆角base64图片的实现
2019/08/18 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
小程序实现按下录音松开识别语音
2019/11/22 Javascript
[02:05]DOTA2完美大师赛趣味视频之看我表演
2017/11/18 DOTA
[01:11:21]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第一场 3月6日
2021/03/11 DOTA
Python中让MySQL查询结果返回字典类型的方法
2014/08/22 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
Python+selenium实现自动循环扔QQ邮箱漂流瓶
2018/05/29 Python
python 日志模块logging的使用场景及示例
2021/01/04 Python
CSS3 box-sizing属性
2009/04/17 HTML / CSS
canvas三角函数模拟水波效果的示例代码
2018/07/03 HTML / CSS
BONIA官方网站:国际奢侈品牌和皮革专家
2016/11/27 全球购物
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
与C++相比,Java中的数组有什么不同
2014/03/25 面试题
升旗仪式主持词
2014/03/19 职场文书
家长写给孩子的评语
2014/04/18 职场文书
篝火晚会策划方案
2014/05/16 职场文书
竞聘演讲稿怎么写
2014/08/28 职场文书
2015年教师新年寄语
2014/12/08 职场文书
孔子观后感
2015/06/08 职场文书
初婚初育证明范本
2015/06/18 职场文书
SpringBoot连接MySQL获取数据写后端接口的操作方法
2021/11/02 MySQL
十大最强岩石系宝可梦,怪颚龙实力最强,第七破坏力很强
2022/03/18 日漫
MySQL主从切换的超详细步骤
2022/06/28 MySQL