Wechat applet
-实现不停点击时,圆在两种样式之间不停切换
【解释详细点,就是:点击一次,空心圆变成实心圆;再点击一次,实心圆变成空心圆;循环往复】
一、效果动态图
二、对应代码:
wxml:
<view class="selectAll" bindtap="select_all">全选<text class="hollow_circle {{isSelectAll?'solid_round':''}}"></text></view>
wxss:
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,
})
},
})