微信小程序的picker-view

<view>{{pickviewname}}</view>

<picker-view style='100%;height:250px;' bindchange='changeme'>
  <picker-view-column>
    <view wx:for="{{year}}">
    {{item}}
    </view>
  </picker-view-column>

  <picker-view-column>
    <view wx:for="{{month}}">
    {{item}}
    </view>
  </picker-view-column>

  <picker-view-column>
    <view wx:for="{{day}}">
    {{item}}
    </view>
  </picker-view-column>

</picker-view>

<view>{{myvalue}}</view>

这个是wxml界面。

Page({

  /**
   * 页面的初始数据
   */
  data: {
    pickviewname:"pick-view组件",
    year:[1990,1995,2000,2005,2010,2015,2020],
    month:[1,2,3,4,5,6,7,8,9,10,11,12],
    day:[1,5,10,15,20,25,30],
    myvalue:"please select the date"
  },
  changeme:function(e){
    var indexs = e.detail.value;

    var year = this.data.year[indexs[0]];
    var month = this.data.month[indexs[1]];
    var day = this.data.day[indexs[2]];
    this.setData({
      myvalue: year+"年"+month+"月"+day+"号"
    })
  }
})

这个是js

这个组件要配合

picker-view-column来使用。