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


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 27 Javascript
EasyUI 中 MenuButton 的使用方法
Jul 14 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 Javascript
js判断变量初始化的三种形式及推荐用的形式
Jul 22 Javascript
js实现的四级左侧网站分类菜单实例
May 06 Javascript
Node.js DES加密的简单实现
Jul 07 Javascript
利用jquery实现下拉框的禁用与启用
Dec 07 Javascript
Vue中如何实现轮播图的示例代码
Jul 27 Javascript
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
vue实现可视化可拖放的自定义表单的示例代码
Mar 20 Javascript
Vue3.0结合bootstrap创建多页面应用
May 28 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 cli 方式 在crotab中运行解决
2010/02/08 PHP
zf框架db类的分页示例分享
2014/03/14 PHP
PH P5.2至5.5、5.6的新增功能详解
2014/07/14 PHP
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
PHP模板引擎Smarty之配置文件在模板变量中的使用方法示例
2016/04/11 PHP
Yii2结合Workerman的websocket示例详解
2018/09/10 PHP
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
自己编写的类似JS的trim方法
2013/10/09 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/20 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
2015/04/07 Javascript
深入理解JavaScript中的对象
2015/06/04 Javascript
js格式化时间的简单实例
2016/11/27 Javascript
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
2020/08/08 Javascript
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python的dict,set,list,tuple应用详解
2014/07/24 Python
python决策树之CART分类回归树详解
2017/12/20 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
Python3.8对可迭代解包的改进及用法详解
2019/10/15 Python
在Python中使用filter去除列表中值为假及空字符串的例子
2019/11/18 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
CSS3 3D立方体效果示例-transform也不过如此
2016/12/05 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
HTML5实现预览本地图片
2016/02/17 HTML / CSS
Rakuten Kobo台湾:电子书、eReaders和Reading应用程式
2017/11/24 全球购物
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
学生处主任岗位职责
2013/12/01 职场文书
优秀员工自荐书范文
2013/12/08 职场文书
关于爱情的广播稿
2014/01/16 职场文书
原料仓管员岗位职责
2014/04/12 职场文书
通知函的格式
2015/04/27 职场文书