1.样式图
数据获取结果
2.wxml代码
<view class="box1">
<view class="box1_left">收货人</view>
<view class="box1_right">
<input type="text" class="name" placeholder="请填写收货人的姓名" bindblur="change_name" > </input>
<radio-group class="radio-group" bindchange="swiperChange" >
<radio class="radio" checked="{{checked}}" value="女士" >
<text>女士</text>
</radio>
<radio class="radio" checked="{{checked1}}" value="先生" >
<text>先生</text>
</radio>
</radio-group>
</view>
</view>
3.wxss部分代码
.box1{
height: 200rpx;
width: 670rpx;
display: flex;
flex-direction: row;
align-items: centerl;
}
.box1_left{
width: 180rpx;
height: 100rpx;
display: flex;
align-items: center;
}
.box1_right{
width: 500rpx;
height: 200rpx;
display: flex;
flex-direction: column;
align-items: centerl;
}
.name{
height: 100rpx;
min-width: 400rpx;
border-bottom: solid 2rpx #D7D7D7;
}
.radio-group{
border-bottom: solid 2rpx #D7D7D7;
height: 100rpx;
min-width: 400rpx;
display: flex;
align-items: center;
}
4.js部分代码
data部分
data: {
//姓名
order_buyname:'',
//性别 默认女士
order_usegender:'女士',
},
(1)获取redio选中后的值
swiperChange:function(e){
var that = this;
var radioValue = e.detail.value;
that.setData({
order_usegender: radioValue
})
console.log(that.data.order_usegender);
},
(2)获取input输入框的值
/**
* 姓名
*/
change_name:function(e){
var that = this;
this.setData({
order_buyname: e.detail.value
})
console.log(that.data.order_buyname);
},
5.小程序input组件事件tap、input、focus、blur触发顺序
tap -> foucs -> tap -> blur
tap事件:这个是小程序中的点击事件,绑定语法是bindtap,微信小程序中每个组件都是有tap事件的;
input事件:是键盘输入事件,绑定语法是bindinput;
focus事件:输入框聚焦事件,绑定语法是bindfocus;
blur事件:输入框失去焦点事件,绑定语法bindblur。
可参考以下博文
点这里