您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本文小编为大家详细介绍“微信小程序如何实现性别单选效果”,内容详细,步骤清晰,细节处理妥当,希望这篇“微信小程序如何实现性别单选效果”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。
效果图:
代码:
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; } } } }
读到这里,这篇“微信小程序如何实现性别单选效果”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。