用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

小程序 点击按钮后修改颜色(样式)

Rolan 2019-12-3 00:32

需实现的功能:点击按钮后,按钮的颜色会加深效果展示:原按钮点击后按钮思路:给按钮设置一个点击事件,点击了按钮后,修改按钮的样式。代码:test.wxml文件 view wx:if="{{sty==0}}" view class="score" style="ba ...

需实现的功能:

点击按钮后,按钮的颜色会加深

效果展示:

原按钮 

点击后按钮

思路:

给按钮设置一个点击事件,点击了按钮后,修改按钮的样式。

代码:

test.wxml文件

  1. <view wx:if="{{sty==0}}">
  2. <view class="score" style="background-color:{{score}};" catchtap='score'>
  3. <text>按钮一</text>
  4. </view>
  5. </view>
  6. <view wx:if="{{sty==1}}">
  7. <view class="score" style="background-color:{{score}};" catchtap='score'>
  8. <text>按钮一</text>
  9. </view>
  10. </view>

test.js文件

  1. Page({
  2. /*** 页面的初始数据*/
  3. data: {
  4. sty:0,
  5. score: '#fff5df',
  6. },
  7. score: function (e) {
  8. //点击按钮,样式改变
  9. let that = this;
  10. that.setData({
  11. sty: 1,
  12. score: 'rgba(252,178,22, 0.3)'
  13. });
  14. },
  15. )}

test.css文件

  1. .score{
  2. width:335rpx;
  3. border-radius:10rpx 0rpx 0rpx 10rpx;
  4. }
  5. .score text{
  6. color: #FCB216;
  7. }
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 故事外的人呀 来自: 简书
  • 天下钞票 2019-12-7 14:26
    1、用if判断显示有点多此一举

    2、<view class=&quot;score&quot; style=&quot;background-color:{{score}};&quot; catchtap='score'>
    这句可以通过修改class来实现
    例如:<view class=&quot;score空格{{score}}&quot;catchtap='score'>
    或者:<view class=&quot;score{{score}}&quot; catchtap='score'>
    然后可以把style在wxss文件里修改

    不过,我提的也仅仅是一种思路。