微信小程序时间选择组件 官方案例详解

这里讲的是原生微信小程序，其实uniapp也是可以用的，不过使用uniapp开发的话没有必要自己写微信的时间选择组件，因为uniapp插件市场里有很多基本成熟的完整组件可以用，非常节省时间，下面的案例是微信官方的，我只做一下解释。

案例：

wxml文件：

<view>
  <view>{{year}}年{{month}}月{{day}}日</view>
  <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
    <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>
</view>

 

wxss文件：

.intro {
  margin: 30px;
  text-align: center;
}

 

js文件：

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({
  data: {
    years: years,
    year: date.getFullYear(),
    months: months,
    month: 7,
    days: days,
    day: 8,
    value: [0, 0, 1],
  },
  bindChange: function (e) {
    const val = e.detail.value;
    console.log(e.detail.value)
    this.setData({
      year: this.data.years[val[0]],
      month: this.data.months[val[1]],
      day: this.data.days[val[2]]
    })
  }
})

效果图：



 

官方dom地址:https://developers.weixin.qq.com/miniprogram/dev/component/picker-view.html

 

案例解析：

声明变量的意义相信大家都看得懂，也就不解释了，这里只对js文件内data内的value做下解释，value的值是一个数组，他代表时间选择器默认选择的哪年哪月哪天，他的值是索引值，下标从0开始，例如value的值为[0,0,0],我们默认选择的年月日就为1990年1月1号，例如value的值为[1,0,0],我们默认选择的年月日就为1991年1月1号，如果索引值超过数组真实的长度就会选择最后一个，例如value的值为[9999999,0,0],我们默认选择的年月日就为2020年1月1号，注：我写这篇文章是2020年，循环的年数组最大为2020。

 

关于bindChange事件里面传进来的参数是什么呢？案例上我console了以下，输出为一个数组，和上面value的值一样，是[0,1,4]这种格式，代表着年月日的索引值，下面就是通过年月日的索引值去获取当前选择的年月日并赋值。