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


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 相关文章推荐
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
Nov 07 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
Aug 14 Javascript
JS实现拖动示例代码
Nov 01 Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
Aug 07 Javascript
js实现当前输入框高亮显示的方法
Aug 19 Javascript
原生javascript实现匀速运动动画效果
Feb 26 Javascript
KnockoutJS 3.X API 第四章之click绑定
Oct 10 Javascript
Vuejs 页面的区域化与组件封装的实现
Sep 11 Javascript
vue的mixins属性详解
Mar 14 Javascript
使用Javascript简单计算器
Nov 17 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
Jun 26 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
Feb 10 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 常用字符串函数总结
2008/03/15 PHP
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
PHP实现微信发红包程序
2015/08/24 PHP
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
php进程daemon化的正确实现方法
2018/09/06 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
Javascript hasOwnProperty 方法 &amp; in 关键字
2008/11/26 Javascript
js Flash插入函数免激活代码
2009/03/31 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
2013/07/15 Javascript
jquery实现文字由下到上循环滚动的实例代码
2013/08/09 Javascript
时间戳转换为时间 年月日时间的JS函数
2013/08/19 Javascript
nodejs npm package.json中文文档
2014/09/04 NodeJs
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
2016/03/31 Javascript
Web Uploader文件上传插件使用详解
2016/05/10 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
深入理解ES7的async/await的用法
2017/09/09 Javascript
JavaScript框架Angular和React深度对比
2017/11/20 Javascript
javascript中join方法实例讲解
2019/02/21 Javascript
详解JS深拷贝与浅拷贝
2020/08/04 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
Python找出9个连续的空闲端口
2016/02/01 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
利用Pytorch实现简单的线性回归算法
2020/01/15 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
解决安装新版PyQt5、PyQT5-tool后打不开并Designer.exe提示no Qt platform plugin的问题
2020/04/24 Python
Django中和时区相关的安全问题详解
2020/10/12 Python
vue.js刷新当前页面的实例讲解
2020/12/29 Python
CSS3实现菜单悬停效果
2020/11/17 HTML / CSS
荷兰超市:DEEN
2018/03/14 全球购物
Beach Bunny Swimwear官网:设计师泳装和性感比基尼
2019/03/13 全球购物
垃圾回收的优点和原理
2014/05/16 面试题
2014年药店工作总结
2014/11/20 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
生日祝酒词大全
2015/08/10 职场文书
初中数学课堂教学反思
2016/02/17 职场文书
Python+uiautomator2实现自动刷抖音视频功能
2021/04/29 Python