【小程序】基于picker-view组件 封装一个时间选择器（年月日时分秒）

一、背景

最近不是到5.20了嘛，本来想做一个记录恋爱时长的小程序来玩玩。开始的恋爱的时间输入嘛，我想着用个时间选择器吧，但一看小程序官方给的picker组件的时间选择仅支持精确到日，或者日期和时间分开。想想能不能做个连在一起，精确到年月日时分秒的时间选择器。需求来了，做一个能选择年月日的时分秒的选择器。官方提供的picker-view我看了demo阅览发现还挺合适，因为我也不需要像picker那样的弹出效果。然后事情就是这么发生了，根据官方demo封装了一个年月日时分秒的组件。

以上是，，啰嗦，，，可以忽略。。。。

二、正文

代码结构

视图层

//index.wxml
<view class="time-picker-container">
    <picker-view indicator-style="height: 50px;" style="width: 100%; height: 95px;" 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-column>
            <view wx:for="{{hours}}" style="line-height: 50px">{{item}}时</view>
        </picker-view-column>
        <picker-view-column>
            <view wx:for="{{minutes}}" style="line-height: 50px">{{item}}分</view>
        </picker-view-column>
        <picker-view-column>
            <view wx:for="{{seconds}}" style="line-height: 50px">{{item}}秒</view>
        </picker-view-column>
    </picker-view>
</view>

样式层

因为目前还是个demo，样式没写

.time-picker-container{

}

json配置

{
  "component": true
}

逻辑层

Component({
    properties: {
       
    },
    data: {
        value: [999, 0, 0, 0, 0, 0],
    },
    lifetimes: {
        // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
        attached: function () {
            console.log('this.data.value[0]的数据类型' + typeof this.data.value[0]);

            this._initTimeArray();
        },
        moved: function () {
        },
        detached: function () {
        },
    },
    methods: {
        /******************************
         * 对外开发的方法（事件）
         */
        bindChange(e) {
            const val = e.detail.value;
            //时间选择器滑动事件，参数：当前选择的时间
            this.triggerEvent('Change', {
                year: this.data.years[val[0]],
                month: this.data.months[val[1]],
                day: this.data.days[val[2]],
                hour: this.data.hours[val[3]],
                minute: this.data.minutes[val[4]],
                second: this.data.seconds[val[5]],
            })
        },

        /******************************
         * 内部方法
         */
        _initTimeArray() {
            const date = new Date();
            const years = [];
            const months = [];
            const days = [];
            const hours = [];
            const minutes = [];
            const seconds = [];

            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)
            }
            for (let i = 1; i <= 23; i++) {
                hours.push(i)
            }
            for (let i = 1; i <= 59; i++) {
                minutes.push(i)
            }
            for (let i = 1; i <= 59; i++) {
                seconds.push(i)
            }

            this.setData({
                years,
                months,
                days,
                hours,
                minutes,
                seconds
            })
        },
    },
});

到此，组件构建完成。

下面是组件的使用

• 在使用页面中配置

{
  "usingComponents": {
    "time-picker":"../../components/time-picker/index"
  }
}

• 在页面的wxml中调用

 <view class="page">
        <view class="container">
            <time-picker  bind:Change="bindChange"></time-picker>
        </view>
 </view>

• 页面的JS

const app = getApp();
let page =null;
Page({
	 data: {},
	 bindChange(e){
       console.log(e.detail);
       //e.detail 为选择器当前选择的时间
   },   
    onLoad: function () {
       page =this;
   },
})

存在的问题

1.无法设置默认时间

即 组件视图层的value不起作用

  <picker-view indicator-style="height: 50px;" style="width: 100%; height: 95px;" value="{{value}}" bindchange="bindChange">

官方对value的描述

据我理解，结合我现在的情况，value=[9999,0,0,0,0,0]数组有六个元素，分别对应年月日时分秒六列应该显示的值。比如月这一列，对应元素为0，指的是月列应该显示months数组的对应索引的0位，即1月。年，9999因为超过数组的最大长度，而显示数组的最后一位，即当前时间的年份。

可是！！可是！！！就是没有根据value来进行初始化的显示！！！为什么啊~ 大神请赐教

我到一篇相关的文章提过一个注意

我当时认为可能时这个原因，为此我还特地在组件的逻辑层log了一下这个数组元素

console.log('this.data.value[0]的数据类型' + typeof this.data.value[0]);

结果是，，是数组呀，并不是字符串啊 ，没有问题啊

思考良久，仍无所获。把代码分享出来给各路网友，希望需要的人能用到。也希望我能喜得大佬点点拨，帮我解决这个问题。初生牛犊，各路好友多多指教。