微信小程序勾选协议
发表时间：2020-9-24
发布人：葵宇科技
浏览次数：82
wxml:
<view class="checkbox flex-y-center" bindtap="click">
<label class='{{checked?"is_checked":""}}'>
<image src="/images/img/ok.png" mode="widthFix"/>
</label>
<view class="check_text">依照学术诚信原则，我保证本人独立完成</view>
</view>
wxss:
.checkbox label{
width: 30rpx;
height: 30rpx;
border: 1rpx solid #bebebe;
border-radius: 5rpx;
margin-right: 10rpx;
position: relative;
}
.checkbox image{
display: none;
}
.is_checked{
background-color: #d43205;
border: 1rpx solid #d43205!important;
}
.is_checked image{
display: block;
width: 18rpx;
height: 14rpx;
position: absolute;
left: 6rpx;
top: 50%;
transform: translateY(-50%);
}
.checkbox{
margin: 30rpx 50rpx;
}
.checkbox .check_text{
width: calc(100% - 40rpx);
font-size: 22rpx;
color: #000;
}
js:
Page({
data: {
checked:false
},
/*勾选协议 */
click:function(e){
this.setData({
checked: !this.data.checked
})
}
});
