微信小程序实现性别单选效果
更新时间：2022年07月19日 10:25:47 作者：幽幽靖
这篇文章主要为大家详细介绍了微信小程序实现性别单选效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现性别单选的具体代码，供大家参考，具体内容如下
效果图：
代码：
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;
}
}
}
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
封装的dialog插件 基于bootstrap模态对话框的简单扩展
这篇文章主要介绍了基于bootstrap模态对话框的简单扩展，bootstrap-mzDialog插件的封装，感兴趣的小伙伴们可以参考一下2016-08-08
学习js的朋友必须要知道或了解的知识2008-12-12
这篇文章主要为大家详细介绍了js+canvas实现简单扫雷小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
这篇文章主要介绍了JS模仿腾讯图片站的图片翻页按钮效果,涉及javascript动态操作页面元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2016-06-06
js实现点击注册按钮开始读秒倒计时的小例子，需要的朋友可以参考一下2013-05-05
这篇文章主要介绍了CocosCreator纹理shader的一些知识，想了解shader的同学，一定要看下，并且亲自动手实践2021-04-04
以下几种方法都是复制一个新的对象或者数组，但是如果直接通过parent【iframe情况】的方式去父窗口的对象的时候会有问题，感兴趣的朋友可以了解下2013-09-09
本文主要介绍了使用setTimeout实现防止循环超时的方法，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
在一个元素的属性中绑定事件，实际上就创建了一个内联事件处理函数（如<h1 onclick="alert(this);"...>...</h1>）,内联事件处理函数有其特殊的作用域链，并且各浏览器的实现细节也有差异。2011-01-01
下面小编就为大家带来一篇关于原生js中bind函数的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
最新评论