时间:2021-05-18
这篇文章主要介绍了微信小程序实现点击按钮后修改颜色,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
需实现的功能:
点击按钮后,按钮的颜色会加深
效果展示:
原按钮
点击后的按钮
思路:
给按钮设置一个点击事件,点击了按钮后,修改按钮的样式。
代码:
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;}以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了微信小程序实现点击按钮修改view标签背景颜色功能。分享给大家供大家参考,具体如下:1、效果展示2、操作步骤:①数据绑定view样式背景属性值②通
本文实例讲述了微信小程序实现点击按钮修改字体颜色功能。分享给大家供大家参考,具体如下:1、效果展示2、关键代码index.wxml文件我是view标签这里使用b
微信小程序点击控件修改样式实例详解现在要在微信小程序中实现点击控件修改样式,如下:微信小程序中不支持直接操作dom,要实现这种效果,我们需要通过设置data,然
微信小程序共用变量值的实现举个例子,比如从商品管理列表页,相对自己发布的商品进行修改,点击修改按钮,通过activityId唯一标识进行修个这个商品,这个act
先上效果图点击授权按钮后可以显示部分资料和头像,点击修改资料可以修改部分资料。流程1.使用微信小程序登录和获取用户信息Api接口2.把Api获取的用户资料和co