微信小程序picker组件

我刚学小程序的时候上拉选择框总是会忘掉，因此今天就写一下文章能够方便记忆，下次就不用总是去搜了，你们也能够一块儿

看。

wxml代码：

普通组件：

<picker class='form-input' mode="selector" range='{{sexArray}}' value='{{sexIndex}}' bindchange='sexChange'>

{{sexIndex != "请选择"?sexArray[sexIndex]:"请选择"}}

</picker>

日期组件：

<picker class='form-input' mode="date" start="1820-01-01" end="9999-01-01" bindchange='DateChange'>

{{userDate}}

</picker>

js代码：

/**

* 页面的初始数据

*/

data: {

sexIndex:'请选择',

sexArray:["男","女"],

userDate:"请选择",

},

/**

* 性别选择

*/

sexChange:function(e){

let thas = this;

thas.setData({

   sexIndex:e.detail.value

});

},

/**

* 日期选择

*/

DateChange:function(e){

let thas = this;

thas.setData({

    userDate:e.detail.value

});

css:

.form-item{display:flex;padding:10rpx 0;line-height:2rem;border-bottom:solid 1px #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-image > image{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;}

效果图：

文章灵感来自：

https://developers.weixin.qq.com/miniprogram/dev/component/picker.html