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


Posted in Javascript onDecember 05, 2019

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

需实现的功能:

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

效果展示:

原按钮

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

点击后的按钮

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

思路:

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

代码:

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 相关文章推荐
jquery查找父元素、子元素(个人经验总结)
Apr 09 Javascript
用jquery模仿的a的title属性的例子
Oct 22 Javascript
浅析javascript中函数声明和函数表达式的区别
Feb 15 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
Mar 20 Javascript
jQuery使用addClass()方法给元素添加多个class样式
Mar 26 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
Angularjs的ng-repeat中去除重复数据的方法
Aug 05 Javascript
WdatePicker.js时间日期插件的使用方法
Jul 26 Javascript
解析Angular 2+ 样式绑定方式
Jan 15 Javascript
react 组件传值的三种方法
Jun 03 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
Jul 27 Javascript
JavaScript实现复选框全选功能
Apr 11 Javascript
React 父子组件通信的实现方法
Dec 05 #Javascript
Javascript中的this,bind和that使用实例
Dec 05 #Javascript
原生JS与CSS实现软件卸载对话框功能
Dec 05 #Javascript
Vue快速实现通用表单验证功能
Dec 05 #Javascript
Vue组件通信中非父子组件传值知识点总结
Dec 05 #Javascript
基于javascript实现贪吃蛇经典小游戏
Apr 10 #Javascript
微信小程序登录时如何获取input框中的内容
Dec 04 #Javascript
You might like
PHP mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
PHP 八种基本的数据类型小结
2011/06/01 PHP
初识PHP
2014/09/28 PHP
CentOS安装php v8js教程
2015/02/26 PHP
基于Swoole实现PHP与websocket聊天室
2016/08/03 PHP
ejs v9 javascript模板系统
2012/03/21 Javascript
Javascript无阻塞加载具体方式
2013/06/28 Javascript
jQuery设置与获取HTML,文本和值的简单实例
2014/02/26 Javascript
javascript中的throttle和debounce浅析
2014/06/06 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
2015/12/16 Javascript
JS函数的定义与调用方法推荐
2016/05/12 Javascript
jquery插件autocomplete用法示例
2016/07/01 Javascript
AngularJS用户选择器指令实例分析
2016/11/04 Javascript
关于js中的鼠标事件总结
2017/07/11 Javascript
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
JavaScript展开操作符(Spread operator)详解
2019/07/20 Javascript
vue不操作dom实现图片轮播的示例代码
2019/12/18 Javascript
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
python获取Linux下文件版本信息、公司名和产品名的方法
2014/10/05 Python
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
python使用itchat实现手机控制电脑
2018/02/22 Python
opencv python 图像去噪的实现方法
2018/08/31 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
Python3 执行Linux Bash命令的方法
2019/07/12 Python
pandas中ix的使用详细讲解
2020/03/09 Python
Python中SQLite如何使用
2020/05/27 Python
在canvas上实现元素图片镜像翻转动画效果的方法
2018/03/20 HTML / CSS
澳大利亚最便宜的网上药房:Chemist Warehouse
2020/01/30 全球购物
关于学习的演讲稿
2014/05/10 职场文书
读书月活动方案
2014/05/22 职场文书
学校教师培训工作总结
2015/10/14 职场文书
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技