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


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压缩工具 yuicompressor 使用教程
Mar 31 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
Oct 17 Javascript
仅30行代码实现Javascript中的MVC
Feb 15 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
Sep 16 Javascript
JS实现汉字与Unicode码相互转换的方法详解
Apr 28 Javascript
vue、react等单页面项目应该这样子部署到服务器
Jan 03 Javascript
vue 设置proxyTable参数进行代理跨域
Apr 09 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
Jun 15 Javascript
对于防止按钮重复点击的尝试详解
Apr 22 Javascript
js实现窗口全屏示例详解
Sep 17 Javascript
微信小程序wx.request的简单封装
Nov 13 Javascript
Vue文本模糊匹配功能如何实现
Jul 30 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你的验证码安全码?
2007/01/02 PHP
PHP实现用户认证及管理完全源码
2007/03/11 PHP
PHP仿博客园 个人博客(1) 数据库与界面设计
2013/07/05 PHP
php使用数组填充下拉列表框的方法
2015/03/31 PHP
php使用Imagick生成图片的方法
2015/07/31 PHP
php swoole多进程/多线程用法示例【基于php7nts版】
2019/08/12 PHP
关于laravel模板中生成URL的几种模式总结
2019/10/18 PHP
Array栈方法和队列方法的特点说明
2014/01/24 Javascript
jQuery的cookie插件实现保存用户登陆信息
2014/04/15 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
2014/10/11 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
JQuery实现鼠标滚轮滑动到页面节点
2015/07/28 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
Jquery如何使用animation动画效果改变背景色的代码
2020/07/20 jQuery
python之wxPython应用实例
2014/09/28 Python
python使用chardet判断字符串编码的方法
2015/03/13 Python
Django Web开发中django-debug-toolbar的配置以及使用
2018/05/06 Python
Python用csv写入文件_消除空余行的方法
2018/07/06 Python
python2和python3应该学哪个(python3.6与python3.7的选择)
2019/10/01 Python
python 3.74 运行import numpy as np 报错lib\site-packages\numpy\__init__.py
2019/10/06 Python
PyTorch学习:动态图和静态图的例子
2020/01/06 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
CSS Grid布局教程之网格单元格布局
2014/12/30 HTML / CSS
HTML5 video 视频标签使用介绍
2014/02/03 HTML / CSS
Canvas 像素处理之改变透明度的实现代码
2019/01/08 HTML / CSS
德国孕妇装和婴童服装网上商店:bellybutton
2018/04/12 全球购物
英国领先的独立时装店:Van Mildert
2019/10/28 全球购物
行政文员岗位职责
2013/11/08 职场文书
医院总经理职责
2013/12/26 职场文书
幼儿园亲子活动方案
2014/01/29 职场文书
五年级英语教学反思
2014/01/31 职场文书
小学一年级评语大全
2014/04/22 职场文书
临床医学生职业规划书范文
2014/10/25 职场文书
三峡人家导游词
2015/01/31 职场文书
Golang 正则匹配效率详解
2021/04/25 Golang