看。
wxml代码:
普通组件:
pickerclass='form-input'mode="selector"range='{{sexArray}}'value='{{sexIndex}}'bindchange='sexChange'
{{sexIndex!="请选择"?sexArray[sexIndex]:"请选择"}}
/picker
日期组件:
pickerclass='form-input'mode="date"start="1820-01-01"end="9999-01-01"bindchange='DateChange'
{{userDate}}
/picker
js代码:
/
页面的初始数据
/
data:{
sexIndex:'请选择',
sexArray:["男","女"],
userDate:"请选择",
},
/
性别选择
/
sexChange:function(e){
letthas=this;
thas.setData({
sexIndex:e.detail.value
});
},
/
日期选择
/
DateChange:function(e){
letthas=this;
thas.setData({
userDate:e.detail.value
});
css:
.form-item{display:flex;padding:10rpx0;line-height:2rem;border-bottom:solid1px#ECABA6;}
.form-item.form-label{flex:1%;max-width:5rem;}
.form-item.form-input{flex:1%;display:inline-block;height:2rem;line-height:2rem;}
.form-imageimage{min-height:841rpx;height:841rpx;display:block;}
.submit-box{position:fixed;bottom:0;left:0;right:0;}
.submit-box.submit{border-radius:0;color:#fff;background:#DB6461;height:80rpx;line-height:80rpx;text-align:center;}
效果图:
文章灵感来自:













