本文实例为大家分享了微信小程序实现按钮颜色状态转换的具体代码,供大家参考,具体内容如下
效果图片:
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';}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。
本文向大家介绍微信小程序 按钮滑动的实现方法,包括了微信小程序 按钮滑动的实现方法的使用技巧和注意事项,需要的朋友参考一下 微信小程序 按钮滑动的实现方法 一.先看东西 滑动前 滑动后 二.再上代码 index.wxml index.wxss index.js 三.顺便说说 1.按钮滑动事件 bindtouchstart //按钮开始滑动 bindtouchend //按钮结束滑动 bindtou
本文向大家介绍微信小程序动态增加按钮组件,包括了微信小程序动态增加按钮组件的使用技巧和注意事项,需要的朋友参考一下 这里的微信小程序动态加载是以按钮为例,主页面点击不同的按钮进入不同的子页面中,根据主页面的title来动态加载子页面按钮的数量以及值。 效果图: wxml文件(注意wx:key="item"要写,不然它会有警告): 这里起关键作用的是wx:for,这里是循环。 wxss文件: js文
本文向大家介绍微信小程序按钮点击动画效果的实现,包括了微信小程序按钮点击动画效果的实现的使用技巧和注意事项,需要的朋友参考一下 动画效果如下: GIF看起来可能会有点卡 wxml wxss 总结 以上所述是小编给大家介绍的微信小程序按钮点击动画效果的实现,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持! 如果你觉得本文对你有帮助,欢迎
材料规格显示禁用按钮状态,看起来是灰色的。 https://www.material.io/design/components/buttons.html#切换按钮 只是默认情况下没有在材料Android组件中实现?材料组件是否定义了禁用的按钮状态器?
本文向大家介绍微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】,包括了微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了微信小程序实现点击按钮修改字体颜色功能。分享给大家供大家参考,具体如下: 1、效果展示 2、关键代码 index.wxml文件 这里使用bindtap="bindtap{{index}}"绑定事件动态修
本文向大家介绍微信小程序按钮点击跳转页面详解,包括了微信小程序按钮点击跳转页面详解的使用技巧和注意事项,需要的朋友参考一下 微信小程序中,按钮也是<button></button>标签,它通过bindtap属性绑定点击事件: 然后在js里面注册这个回调函数: 回调函数里面通过 跳转到talkPage界面。 注意,html界面要在app.json里面注册: 不注册的话会报错:navigateTo:f