您现在的位置是:网站首页> 编程资料编程资料
微信小程序实现性别单选效果_javascript技巧_
2023-05-24
374人已围观
简介 微信小程序实现性别单选效果_javascript技巧_
本文实例为大家分享了微信小程序实现性别单选的具体代码,供大家参考,具体内容如下
效果图:

代码:
html:
性别 {{item.value}}
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; } } } }以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
您可能感兴趣的文章:
相关内容
- JavaScript复原何同学B站头图细节示例详解_JavaScript_
- ES6 Promise.all的使用方法以及其细节详解_javascript技巧_
- 微信小程序自定义组件实现多选功能_javascript技巧_
- 微信小程序自定义组件实现单选功能_javascript技巧_
- Element table 上下移需求的实现_vue.js_
- 使用JavaScript练习动画最好的方式封面过渡_JavaScript_
- 一文教会你搭建vite项目并配置路由和element-plus_vue.js_
- 微信小程序单选框组应用详解_javascript技巧_
- vite+element-plus项目基础搭建的全过程_vue.js_
- 微信小程序自定义单选框样式实现单选功能_javascript技巧_
