微信小程序实现性别单选效果
作者:幽幽靖
这篇文章主要为大家详细介绍了微信小程序实现性别单选效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现性别单选的具体代码,供大家参考,具体内容如下
效果图:
代码:
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; } } } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。