2020年10月30日

微信小程序切图之单选框radio复选框checkbox


小程序切图之单选框radio


<radio-group class="radio-group" bindchange="radioChange">
<label class="radio" wx:for="{{items}}">
<radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</radio-group>

JS


Page({
data: {
items: [
{name: 'USA', value: '美国'},
{name: 'CHN', value: '中国', checked: 'true'},
{name: 'BRA', value: '巴西'},
{name: 'JPN', value: '日本'},
{name: 'ENG', value: '英国'},
{name: 'TUR', value: '法国'},
]
},
radioChange: function(e) {
console.log('radio发生change事件,携带value值为:', e.detail.value)
}
})

 

样式修改方法


/* 单选、多选 勾选 */


/*radio未选中时样式 */
radio .wx-radio-input{
/* 自定义样式.... */
/* 我这里没有进行,未选中的样式修改
height: 40rpx;
width: 40rpx;
margin-top: -4rpx;
border-radius: 50%;
border: 2rpx solid #999;
background: transparent;
*/

}


/* 选中后的 背景样式 (红色背景 无边框 可根据UI需求自己修改) */
radio .wx-radio-input.wx-radio-input-checked {
/* border: none; */
border-color: #2792ff!important;
/* background-color: #fff!important; */
/* background-color: transparent!important; */
/* 居中 */
/*
display: flex;
justify-content: center;
align-items: center;
*/

}

/* 选中后的 对勾样式 (白色对勾 可根据UI需求自己修改) */
radio .wx-radio-input.wx-radio-input-checked::before {
/* 去除对号 */
content: '';
/* background: #fff; */
width: 36rpx;
height: 36rpx;
border-radius: 50%;
/* background: red; */
background-color: #2792ff;
/* 居中 */
/* margin-top: 0rpx; */
/* display: flex; */
/* position: relative; */

}

 

复选框checkbox


<checkbox-group bindchange="checkboxChange">
<label class="checkbox" wx:for-items="{{items}}">
<checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</checkbox-group>

JS


Page({
data: {
items: [
{name: 'USA', value: '美国'},
{name: 'CHN', value: '中国', checked: 'true'},
{name: 'BRA', value: '巴西'},
{name: 'JPN', value: '日本'},
{name: 'ENG', value: '英国'},
{name: 'TUR', value: '法国'},
]
},
checkboxChange: function(e) {
console.log('checkbox发生change事件,携带value值为:', e.detail.value)
}
})

样式修改方法


/*checkbox未选中时样式 */
checkbox .wx-checkbox-input{
/* 自定义样式.... */
border-radius: 50%;

}


/* 选中后的 背景样式 (红色背景 无边框 可根据UI需求自己修改) */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
/* border: none; */
border-radius: 50%;
border-color: #2792ff!important;


}

/* 选中后的 对勾样式 (白色对勾 可根据UI需求自己修改) */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
/* 去除对号 */
content: '';
/* background: #fff; */
width: 36rpx;
height: 36rpx;
border-radius: 50%;
/* background: red; */
background-color: #2792ff;
/* 居中 */
/* margin-top: 0rpx; */
/* display: flex; */
/* position: relative; */

}

本文由专业的WEB前端外包公司-切图网原创,转载请保留版权( WEB前端开发外包www.qietu.com切图网始于2007年,提供高品质的前端开发服务、前端外包、切图外包。欢迎来电咨询!热线:027-81777732、13343477732

标签: