欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?qū)崿F(xiàn)性別單選效果

 更新時(shí)間：2022年07月19日 10:25:47   作者：幽幽靖  
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)性別單選效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)性別單選的具體代碼，供大家參考，具體內(nèi)容如下

效果圖：

代碼：

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發(fā)生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提交時(shí)，提交的是選中的性別的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;
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? }
}

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論