小程序底部弹窗的选择器，picker-view和picker的用法和区别

最近在开发一个金融类的小程序，，很遗憾的是因为资质问题没上线。所以就想把遇到的坑写下来。。。。。

坑之一：picker不能改样式，很绝望。。。。。。。。

开始因为要写一个，普通的类别选择器，问了ios的实现方法，有自带的组件实现，然后看了微信小程序的api找到了picker。

万万没想到把用picker写完选择器后发现手机和模拟器上的样式有差别，哎，，最后只有找新的组件了，picker-view,

代码步骤如下：

1、先绑定一个bindtap='selsectdate'事件触发选择器：wxml代码：

< view class= "tarInput" bindtap= 'selsectdate'>

< text class= 'textleft'>上牌时间 </ text >

< input type= "text" name= "date" id= "date" placeholder= "选择上牌日期" disabled= 'true' value= '{{year}}{{line}}{{month}}'></ input >

< i class= "iconfont icon-right je-texticon"></ i >

</ view >

2、js代码（i的大小根据自己的需求定）

     初始化弹窗的内容

const date = new Date()

const years = []

const months = []

const days = []

for ( let i = 1990; i <= date.getFullYear(); i++) {

years.push(i)

}

for ( let i = 1; i <= 12; i++) {

months.push(i)

}

for ( let i = 1; i <= 31; i++) {

days.push(i)

}

page里面写其对应的js事件

selsectdate: function(){

this.setData({

showWin: true //控制弹窗隐藏显示

})

},

绑定弹窗的滑动事件

bindChange: function (e) {

const val = e.detail.value

this.setData({

yearchange: this.data.years[val[ 0]],

monthchange: this.data.months[val[ 1]],

})

console.log( this.data.yearchange)

},

取消弹窗和确定弹窗的事件

// 取消弹窗

lcaarcancel: function(){

this.setData({

showWin: false

})

},

// 确定

lcafinish: function () {

var yearchange = this.data.yearchange|| '';

var monthchange = this.data.monthchange|| ''

console.log(monthchange)

if (!yearchange){

this.setData({

year: date.getFullYear(),

month: 2,

})

} else{

this.setData({

year: yearchange,

month: monthchange,

})

}

this.setData({

showWin: false,

line: '-',

})

},

// 点击灰色蒙层的冒泡事件

stopwin: function () {

}