2021-01-04 工作记录--Wechat applet-实现不停点击时，圆在两种样式之间不停切换

Wechat applet-实现不停点击时，圆在两种样式之间不停切换

【解释详细点，就是：点击一次，空心圆变成实心圆；再点击一次，实心圆变成空心圆；循环往复】

一、效果动态图

二、对应代码：

HTML

<view class="selectAll" bindtap="select_all">全选<text class="hollow_circle {{isSelectAll?'solid_round':''}}"></text></view>

CSS

hollow_circle {
  display: block;
  width: 36rpx;
  height: 36rpx;
  border: 2rpx solid #FFAF10;
  border-radius: 50%;
  margin-left: 16rpx;
}
.solid_round {
  position: relative;
}
.solid_round::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 24rpx;
  height: 24rpx;
  background-color: #FFAF10;
  border-radius: 50%;
}

JS

第一种方法：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    isSelectAll: false, // 是否点击全选
  },

  select_all() {
    if(this.data.isSelectAll == false) {
      this.setData({
        isSelectAll: true,
      })
    } else {
      this.setData({
        isSelectAll: false,
      })
    }
  },
  
})

第二种方法：【更简单便捷、更推荐】

Page({

  /**
   * 页面的初始数据
   */
  data: {
    isSelectAll: false, // 是否点击全选
  },

  select_all() {
    this.setData({
      isSelectAll: !this.data.isSelectAll,
    })
  },
})