微信小程序性别单选
幽幽靖 人气:0效果图:
代码:
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; } } } }
加载全部内容