本文小编为大家详细介绍“微信小程序如何实现性别单选效果”，内容详细，步骤清晰，细节处理妥当，希望这篇“微信小程序如何实现性别单选效果”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
效果图：
代码：
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;
}
}
}
}读到这里，这篇“微信小程序如何实现性别单选效果”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
