小程序按鈕點擊變色的方法

小程序按鈕點擊變色的方法：1.創(chuàng)建微信小程序項目；2.在index.wxml文件中添加按鈕組件代碼；3.在index.wxss文件里添加兩種按鈕樣式；4.在index.js文件中添加交互代碼來測試效果；5.保存編輯的代碼并進行調(diào)試即可。

具體操作步驟如下：

1、首先在創(chuàng)建一個微信小程序項目。

2、在pages包下的index目錄中index.wxml文件里添加按鈕組件代碼<button>來實現(xiàn)一個簡單的按鈕。

<view class="iconusecont-div {{state==index?'active-tag':''}}" bindtap="select_use" wx:for="{{use}}" data-key='{{index}}'>
  <view class="flex-item">
    <rich-text class='use_name'>{{item.use_name}}</rich-text>
  </view>
</view>

3、在pages包下的index目錄中index.wxss文件里添加兩種按鈕樣式，實現(xiàn)點擊后改變的區(qū)別。

/* 樣式 */
 
.iconusecont-div {
  display: inline-block;
  width: 32%;
  text-align: center;
  margin-top: 30rpx;
}
 
.flex-item {
  display: inline-block;
  width: 173rpx;
  height: 78rpx;
  font-size: 26rpx;
  border: 2rpx solid #999;
  text-align: center;
  border-radius: 10rpx;
  color: #000;
  cursor: pointer;
  line-height: 30rpx;
}
 
.use_name {
  font-size: 34rpx;
  line-height: 79rpx;
}
 
.active-tag .flex-item {
  background: #03e2ff;
  color: #fff;
  border: 1rpx solid #fff;
}

4、在pages包下的index目錄中index.js文件添加交互代碼來測試按鈕是否可以點擊后變色。

Page({
  data: {
    use: [{
        "use_name": "全部"
      },
      {
        "use_name": "某個"
      },
    ],
    state: '',
  },
  //選擇用途后加樣式
  select_use: function(e) {
    this.setData({
      state: e.currentTarget.dataset.key,
    });
  },
  onReady: function() {},
})

5、最后保存編輯的代碼進行調(diào)試，保存快捷鍵【Ctrl+S】。

在開發(fā)工具左側(cè)即可看到設(shè)計效果，點擊按鈕前效果：

點擊按鈕后，如果按鈕背景顏色改變，說明設(shè)置成功。