您當前位置>首頁 » 新聞資(zī)訊 » 小程序相關(guān) >
微信小程序勾選協議
發表時間：2020-9-24
發布人：葵宇科技
浏覽次數：58
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">依照學術(shù)誠信原則，我保證本人獨立完成</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
})
}
});
