小程序 点击按钮改变字体和背景颜色

1. 通过定义变量 - 点击改变字体颜色(单个按钮)

效果图

• 注意：微信小程序开发中使用 button 设置禁用时候，按钮会有默认的背景色和边框，需要修改 disabled 背景颜色和字体颜色。

<view bindtap="onSendPhoneCord">
   <button 
      plain="true" 
      class="code-btn {{ flag == 0 ? 'active' : '' }}" 
      data-style="0"
      disabled="{{isDisabled}}" >{{sendCord}}
   </button>
</view> 

page({
  data:{
    flag: 0,
  },
  
  onSendPhoneCord:function(e){
    this.setData({
      flag: e.target.dataset.style
    })
  }
})

.code-btn {
  padding: 0 30rpx;
  border: 1rpx solid #ADADAD;
  border-radius: 26rpx;
  margin-top: -10rpx;
  font-size: 22rpx;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 去掉按钮默认边框 */
.code-btn::after {
  border: none;
}


.active{
  background-color: #ffffff;
  color: #3CC5BC;
  font-size: 22rpx;
}

/* button 设置 disabled 之后背景颜色和字体颜色的值都是默认的 ,需要修改 disabled 背景颜色和字体颜色。 */
active[disabled][type="default"],wx-button[disabled]:not([type]){
  color:#3CC5BC!important;
  border: 1px solid #3CC5BC;
  background-color: #FFFFFF;
}

/* 修改按钮默认颜色 */
button[plain]{  
  color:#ADADAD!important;
  border: 1px solid #ADADAD;
}

https://blog.csdn.net/weixin_34378922/article/details/91791438

2. 通过自定义变量 - 点击改变字体颜色(多个按钮)

效果图

<view class="search-data">
   <text class="{{dataId == 0 ? 'search-today' : 'search-otherday'}}" id="0" bindtap="onDataSearch">今日</text>
   <text class="{{dataId == 2 ? 'search-today' : 'search-otherday'}}" id="2" bindtap="onDataSearch">近三天</text>
   <text class="{{dataId == 6 ? 'search-today' : 'search-otherday'}}" id="6" bindtap="onDataSearch">近一周</text>
</view>

page({
  data:{
    dataId: 2, // 默认查询近3天数据
  },

 /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.onDataSearch(2)  // 默认查询近三天
})

// 获取今日/近三天/近一周数据
  onDataSearch:function(item){
    var value = typeof(item) !== 'number' ? item.target.id : item;  // 判断当前是手动点击进来还是默认近三天
    var beingData = new Date();
    beingData.setTime(beingData.getTime()- value*24*60*60*1000);
    this.setData({
      dataId: typeof(item) !== 'number' ? item.target.id : item
    })

    this.data.start = beingData;
    this.data.end = new Date();
  },

.search-today{
  font-size: 28rpx;
  font-weight: bold;
  color: #4FCECE;
}
.search-otherday{
  font-size: 28rpx;
  color: #888888;
}