小程序点击事件的样式处理

wxml代码

  <view class="{{isChecked?'kitchen_card':'kitchen_cardTwo'}}" wx:for="{{details_list}}" wx:for-item="item" wx:key="">
    <text class="{{isChecked?'temp':'tempTwo'}}">{{item.temperature}}℃</text>
    <van-icon name="setting-o" color="#aaa" custom-style="margin-top:24rpx;margin-left:158rpx;" bindtap="Equipment_details"/>
    <view class="{{isChecked?'btn':'btntwo'}}" bindtap="btnClick">
      <view wx:if="{{testtrue}}">打开</view>
      <view wx:else>关闭</view>
    </view>
    <view class="{{isChecked?'name':'nameTwo'}}">{{item.name}}</view>
    <view class="online_icon">
      <image src="{{isChecked?online_src:offline}}" mode="scaleToFill" class="online_img"></image>
    </view>
    <view class="{{isChecked?'model':'modelTwo'}}">{{item.model}}</view>
    <view class="{{isChecked?'block':'blockTwo'}}"></view>
  </view>

wxss代码

.kitchen_card {
  width: 316rpx;
  height: 344rpx;
  background: rgba(51, 51, 51, 1);
  border-radius: 16rpx;
  margin-left: 36rpx;
  margin-top:6rpx;
  float: left;
  box-shadow: 0rpx -2rpx 1rpx 0rpx #aaa,
                -2rpx 0rpx 1rpx 0rpx #aaa,
                2rpx 0rpx 1rpx 0rpx #aaa,
                0rpx 2rpx 1rpx 0rpx #aaa;
}
.kitchen_cardTwo{
  width: 316rpx;
  height: 344rpx;
  background: rgba(255, 255, 255, 1);
  border-radius: 16rpx;
  margin-left: 36rpx;
  margin-top:6rpx;
  float: left;
  box-shadow: 0rpx -2rpx 1rpx 0rpx #aaa,
                -2rpx 0rpx 1rpx 0rpx #aaa,
                2rpx 0rpx 1rpx 0rpx #aaa,
                0rpx 2rpx 1rpx 0rpx #aaa;
}
.temp {
  color: #fff;
  margin-left: 32rpx;
  margin-top: 24rpx;
  float: left;
}
.tempTwo{
    color: #333;
  margin-left: 32rpx;
  margin-top: 24rpx;
  float: left;
}

.name {
  color: #fff;
  margin-left: 32rpx;
  font-size: 28rpx;
}
.nameTwo{
  color: #333;
  margin-left: 32rpx;
  font-size: 28rpx;
}

.btn {
  display: block;
  width: 172rpx;
  height: 64rpx;
  background: rgba(255, 255, 255, 1);
  border-radius: 32rpx;
  margin-top: 24rpx;
  margin-left: 32rpx;
  text-align: center;
  line-height: 64rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Regular;
  margin-bottom: 16rpx;
  color: #000;
}

.btntwo {
  display: block;
  width: 172rpx;
  height: 64rpx;
  background: rgba(51, 51, 51, 1);
  border-radius: 32rpx;
  margin-top: 28rpx;
  margin-left: 32rpx;
  text-align: center;
  line-height: 64rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Regular;
  margin-bottom: 16rpx;
  color: #fff;
}

.model {
  font-size: 22rpx;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  line-height: 32rpx;
  margin-left: 32rpx;
}
.modelTwo{
    font-size: 22rpx;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: #333;
  line-height: 32rpx;
  margin-left: 32rpx;
}

.block {
  width: 78rpx;
  height: 4rpx;
  background: rgba(255, 255, 255, 1);
  margin-left: 206rpx;
  margin-top: 14rpx;
}
.blockTwo{
    width: 78rpx;
  height: 4rpx;
  background:#333;
  margin-left: 206rpx;
  margin-top: 14rpx;
}

.online_icon {
  width: 80rpx;
  height: 80rpx;
  margin-left: 120rpx;
  margin-top: -60rpx;
}

.online_img {
  width: 100%;
  height: 100%;
}

js代码

const app = getApp()

 Page({
   data: {
     motto: 'Hello World',
     userInfo: {},
     hasUserInfo: false,
     checked: true,
     details_list: "",
     src: "../../images/add_btn.png",
     online_src: "../../images/online.png",
     offline: "../../images/offline.png",
     testtrue: true,
     isChecked: true,
     canIUse: wx.canIUse('button.open-type.getUserInfo')
   },

   btnClick: function() {
     var isShow = this.data.testtrue;
     var ischeckedshow = this.data.isChecked;
     this.setData({
       testtrue: !isShow,
       isChecked: !ischeckedshow
     })
   },


   //事件处理函数
   bindViewTap: function() {
     wx.navigateTo({
       url: '../logs/logs'
     })
   },
   addPage: function() {
     wx.navigateTo({
       url: '../add/add'
     })
   },
   Equipment_details:function(){
     wx.navigateTo({
       url: '../Equipment_details/Equipment_details',
     })
   },
   onChange(event) {
     // 需要手动对 checked 状态进行更新
     this.setData({
       checked: event.detail
     });
   },
   onLoad: function() {}
    
 })