小程序picker-view的使用

小程序picker-view的使用


<picker-view indicator-style="height: 50px;" style="width: 100%;font-size: 14px;" value="{{value}}" bindchange="bindChange" class="pickerView" wx:if="{{showPicker}}" data-id="pickerFloat">
<picker-view-column>
<view wx:for="{{years}}" style="line-height: 50px">{{item}}年</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{months}}" style="line-height: 50px">{{item}}月</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{days}}" style="line-height: 50px">{{item}}日</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{hours}}" style="line-height: 50px">{{item}}时</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{mins}}" style="line-height: 50px">{{item}}分</view>
</picker-view-column>
</picker-view>
</view>


const date = new Date()
const years = [];
const months = [];
const days = [];
const hours = [];
const mins = [];
   for (let i = 2017; i <= date.getFullYear()+1; i++) {
        years.push(""+i)
   }
    for (let i = 1 ; i <= 12; i++) {
      if(i < 10){
        i =  '0' + i;
      }
      months.push(""+i)
    }

for (let i = 1 ; i <= 31; i++) {
  if(i < 10){
    i =  '0' + i;
  }
  days.push(""+i)
}

for (let i = 0 ; i <= 23; i++) {
  if(i < 10){
    i =  '0' + i;
  }
  hours.push(""+i)
}

for (let i = 0 ; i <= 59; i++) {
      if(i < 10){
        i =  '0' + i;
      }
      mins.push(""+i)
}
Page({
    data:{
        // 日期的数据
        years: years,
        year: date.getFullYear(),
        months: months,
        month1: 2,
        days: days,
        day: 2,
        hours: hours,
        hour: 9,
        mins: mins,
        min: 16,
        showPicker: false,
        value:[]
    }   ,
    // 改变日期
  bindChange: function(e) {
    const val = e.detail.value
    this.setData({
      year: this.data.years[val[0]],
      month1: this.data.months[val[1]],
      day: this.data.days[val[2]],
      hour:this.data.hours[val[3]],
      min: this.data.mins[val[4]],
      value:[val[0],val[1],val[2],val[3],val[4]]
    })
    this.setData({
      endTime:this.data.year+'-'+this.data.month1+'-'+this.data.day+' '+this.data.hour+':'+this.data.min+':00'
    })
  },
  showPicker: function(){
    this.setData({showPicker: true})
  },
  closePickerFloat: function(e){
    console.log(e)
    if(e.target.dataset.id !== "pickerFloat" && e.target.dataset.id !== "write" ){
      this.setData({showPicker: false})
    }
  } 

})

“`