微信小程序实现性别单选效果

本文实例为大家分享了微信小程序实现性别单选的具体代码，供大家参考，具体内容如下

效果图：

代码：

html:

<view class="inputbox">
? ? ? ? <view class="inptxt">性别</view>
? ? ? ? <view class="inpbox">
? ? ? ? ? <radio-group bindchange="radioChange" class="inp radiogroup">
? ? ? ? ? ? <view class="radiobox" wx:for="{{sex}}" wx:key="value">
? ? ? ? ? ? ? <radio value="{{item.id}}" color="#ff0000" checked="{{item.checked}}"/>
? ? ? ? ? ? ? <view class="radiotxt">{{item.value}}</view>
? ? ? ? ? ? </view>
? ? ? ? ? </radio-group> ? ? ? ? ?
? ? ? ? </view>
</view>

js:

data:{
?? ?sex: [{
? ? ? id: 1,
? ? ? value: '男'
? ? }, {
? ? ? id: 2,
? ? ? value: '女'
? ? }],
}

// sexinp
? radioChange: function (e) {
? ? // console.log('radio发生change事件，携带value值为：', e.detail.value)
? ? const sex = this.data.sex
? ? for (let i = 0, len = sex.length; i < len; ++i) {
? ? ? sex[i].checked = sex[i].id == e.detail.value
? ? }
? ? this.setData({
? ? ? sex
? ? })
? ? console.log(this.data.sex);
? },

(注意：post提交时，提交的是选中的性别的id，所以需要把选中的id 提出来，再提交)

postaddManage: function () {
?? ?let sex = '';
? ? this.data.sex.map((item, index) => {
? ? ? if (item.checked) {
? ? ? ? sex = item.id;
? ? ? }
? ? })
?? ?let params = {
?? ??? ?sex: sex,
?? ?}
?? ?addManage(params).then(res => {
?? ??? ?console.log(res);
?? ?})
}

css(less):

.inputbox {
? ? ? ? display: flex;
? ? ? ? flex-direction: row;
? ? ? ? // justify-content: space-between;
? ? ? ? width: 100%;
? ? ? ? height: 80rpx;
? ? ? ? line-height: 80rpx;
? ? ? ? margin-top: 10rpx;
? ? ? ? border-bottom: 1px solid #f1f1f1;
? ? ? ? font-size: 32rpx;
? ? ? ? color: #353535;

? ? ? ? .inptxt {
? ? ? ? ? white-space: nowrap;
? ? ? ? }

? ? ? ? .inpbox {
? ? ? ? ? width: 100%;
? ? ? ? ? margin-left: 20rpx;
? ? ? ? ? display: flex;
? ? ? ? ? flex-direction: row;
? ? ? ? ? justify-content: space-between;

? ? ? ? ? .inp {
? ? ? ? ? ? position: relative;
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 80rpx;
? ? ? ? ? }

? ? ? ? ? .telinpbox {
? ? ? ? ? ? width: 240rpx;
? ? ? ? ? ? // height: 52rpx;
? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? margin-top: 10rpx;

? ? ? ? ? ? .telinp {
? ? ? ? ? ? ? width: 55rpx;
? ? ? ? ? ? ? height: 55rpx;
? ? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? ? margin-left: 25rpx;
? ? ? ? ? ? }
? ? ? ? ? }

? ? ? ? ? .radiogroup {
? ? ? ? ? ? display: flex;
? ? ? ? ? ? flex-direction: row;

? ? ? ? ? ? .radiobox {
? ? ? ? ? ? ? display: flex;
? ? ? ? ? ? ? flex-direction: row;
? ? ? ? ? ? ? margin-left: 50rpx;
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于微信小程序实现性别单选效果的详细内容...