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


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 相关文章推荐
JavaScript实现禁止后退的方法
Dec 27 Javascript
jQuery写的日历(包括日历的样式及功能)
Apr 23 Javascript
详解JavaScript中常用的函数类型
Nov 18 Javascript
简单实现bootstrap导航效果
Feb 07 Javascript
原生js仿浏览器滚动条效果
Mar 02 Javascript
Vue中img的src属性绑定与static文件夹实例
May 18 Javascript
javascript用rem来做响应式开发
Jan 13 Javascript
JavaScript异步加载问题总结
Feb 17 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 Javascript
javascript操作元素的常见方法小结
Nov 13 Javascript
Vue快速实现通用表单验证的示例代码
Jan 09 Javascript
JS实现网站楼层导航效果代码实例
Jun 16 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
ThinkPHP使用心得分享-上传类UploadFile的使用
2014/05/15 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
PHP curl使用实例
2015/07/02 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
推荐一些非常不错的javascript学习资源站点
2007/08/29 Javascript
Javascript String对象扩展HTML编码和解码的方法
2009/06/02 Javascript
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
IE6-8中Date不支持toISOString的修复方法
2014/05/04 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
2016/07/24 Javascript
浅谈js多维数组和hash数组定义和使用
2016/07/27 Javascript
javascript 小数乘法结果错误的处理方法
2016/07/28 Javascript
D3.js中强制异步文件读取同步的几种方法
2017/02/06 Javascript
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
利用纯js + transition动画实现移动端web轮播图详解
2017/09/10 Javascript
angular4强制刷新视图的方法
2018/10/09 Javascript
了解JavaScript中的选择器
2019/05/24 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
[01:03:47]VP vs NewBee Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
django 常用orm操作详解
2017/09/13 Python
python进程的状态、创建及使用方法详解
2019/12/06 Python
推荐值得学习的12款python-web开发框架
2020/08/10 Python
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
2012/11/29 HTML / CSS
实例教程 利用html5和css3打造一款创意404页面
2014/10/20 HTML / CSS
移动通信行业实习自我鉴定
2013/09/28 职场文书
材料物理专业个人求职信
2013/12/15 职场文书
教师岗位职责范本
2013/12/29 职场文书
项目管理计划书
2014/01/09 职场文书
表决心的诗句大全
2014/03/11 职场文书
组织鉴定材料
2014/06/02 职场文书
党员对照检查材料
2014/09/22 职场文书
2014教育局对照检查材料思想汇报
2014/09/23 职场文书
科技活动周标语
2014/10/08 职场文书
教师群众路线学习心得体会
2014/11/04 职场文书
2014年营业员工作总结
2014/11/18 职场文书
MySQL系列之八 MySQL服务器变量
2021/07/02 MySQL
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript