微信小程序实现点击按钮后修改颜色

更新时间：2019年12月05日 10:49:12 作者：故事外的人呀

这篇文章主要介绍了微信小程序实现点击按钮后修改颜色,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

需实现的功能：

点击按钮后，按钮的颜色会加深

效果展示：

原按钮

点击后的按钮

思路：

给按钮设置一个点击事件，点击了按钮后，修改按钮的样式。

代码：

test.wxml文件

 <view wx:if="{{sty==0}}">
 <view class="score" style="background-color:{{score}};" catchtap='score'>
  <text>按钮一</text>
 </view>
</view>
<view wx:if="{{sty==1}}">
 <view class="score" style="background-color:{{score}};" catchtap='score'>
  <text>按钮一</text>
 </view>
</view>

test.js文件

Page({
 /*** 页面的初始数据*/
 data: {
  sty:0,
  score: '#fff5df', 
 },
 score: function (e) {
  //点击按钮，样式改变
  let that = this;
  that.setData({
   sty: 1,
   score: 'rgba(252,178,22, 0.3)'
  });
 },
)}

test.css文件

.score{
 width:335rpx;
 border-radius:10rpx 0rpx 0rpx 10rpx;
}
.score text{
 color: #FCB216;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

javascript跨域刷新实现代码
在XX项目里面需要通过一个iframe去刷新同一窗口的另外一个iframe。一个超级简单的处理，但我还在blog上记一记，有些看似简单的东西，在真实项目应用中还是值得思考地方
2011-01-01
利用404错误页面实现UrlRewrite的实现代码
要求:网站编码为utf-8,不适用于GB2312; 替换字符的正则可以自己增加和修改，以适合自己的网站；
2008-08-08
avascript中的自执行匿名函数应用示例
javascript中的自执行匿名函数可以用它创建命名空间，只要把自己所有的代码都写在这个特殊的函数包装内，那么外部就不能访问，除非你允许
2014-09-09
event.srcElement+表格应用
event.srcElement+表格应用...
2006-08-08
精彩的Bootstrap案例分享重点在注释!(选项卡、栅格布局)
这篇文章主要为大家分享了一个精彩的Bootstrap案例，涉及到了选项卡、栅格布局，关键重点在注释，感兴趣的小伙伴们可以参考一下
2016-07-07
a标签调用js的方法总结
在本篇文章中小编给大家整理了一篇关于a标签调用js的几种方法的相关内容，有此需要的朋友们可以参考下。
2019-09-09
TypeScript接口与泛型全面精讲
接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法，泛型是静态类型语言的基本特征，允许将类型作为参数传递给另一个类型、函数、或者其他结构
2022-10-10
原生JavaScript实现Tooltip浮动提示框特效
这篇文章主要为大家详细介绍了原生JavaScript设计和实现Tooltip浮动提示框特效，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
layui use 定义js外部引用函数的方法
今天小编就为大家分享一篇layui use 定义js外部引用函数的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
Bootstrap被封装的弹层
这篇文章主要介绍了Bootstrap被封装的弹层的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-07-07