[移动开发]简单写了一个选择月日的微信小程序picker弹窗组件

起因：

微信自带的picker选择器，只有xx年xx月xx日，xx年xx月和xx年，没有xx月xx日的样式。而自己有开发需求，需要用户选择自己的生日，无关年份的，就尝试自己写了一个，代码如下

微信原生代码：

wxml：

	<!-- 月：日选择器 -->
	<view class="date-picker {{isShow?'date-picker-show':''}}">
		<view class="data-picker-mask" bindtap="close"></view>
		<view class="picker-box {{isShow?'picker-box-show':''}}">
			<view class="check-box">
				<view class="cancel-btn" bindtap="close">取消</view>
				<view class="confirm-btn" bindtap="confirmPop">确定</view>
			</view>
			<picker-view class="date-picker-view" value="{{value}}" indicator-style="height: 			    50px;" bindchange="dateChange">
				<picker-view-column>
					 <view class="date-item" wx:for="{{month}}" wx:key="index">{{item}}月</view>
				</picker-view-column>
				<picker-view-column>
					 <view class="date-item" wx:for="{{day}}" wx:key="index">{{item}}日</view>
				</picker-view-column>
			</picker-view>
		</view>
	</view>

wxss：

.date-picker {
  width: 100%;
  height: 100vh;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.5);
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
          align-items: flex-end;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all .4s;
  transition: all .4s;
}
.date-picker .data-picker-mask {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
.date-picker .picker-box {
  width: 100%;
  background-color: #fff;
  -webkit-transform: translateY(101%);
          transform: translateY(101%);
  -webkit-transition: all .4s;
  transition: all .4s;
}
.date-picker .picker-box .check-box {
  height: 50px;
  border-bottom: 1rpx solid #F5F5F7;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
.date-picker .picker-box .check-box .confirm-btn,
.date-picker .picker-box .check-box .cancel-btn {
  width: 100rpx;
  text-align: center;
  font-size: 28rpx;
  font-weight: 400;
  color: #B2B2B2;
}
.date-picker .picker-box .check-box .confirm-btn {
  font-weight: 500;
  color: #19BE6B;
}
.date-picker .picker-box .date-picker-view {
  width: 100%;
  height: 300px;
}
.date-picker .picker-box .date-picker-view .date-item {
  line-height: 50px;
  text-align: center;
}
.date-picker .picker-box-show {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.date-picker-show {
  opacity: 1;
  visibility: visible;
}

js:

Component({
  /**
   * 组件的属性列表
   */
  properties: {
  	//默认日期
    date: {
      type: String,
      value: '1-1'
    }
  },
  observers: {
    'date': function(val) {
      if(val == '1-1') return
      const date = val.split('-')
      this.setData({
        value:[ date[0]-1,date[1] -1],
      })
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    isShow: false,
    month_day: [
      {m:'1',day:31},
      {m:'2',day:29},
      {m:'3',day:31},
      {m:'4',day:30},
      {m:'5',day:31},
      {m:'6',day:30},
      {m:'7',day:31},
      {m:'8',day:31},
      {m:'9',day:30},
      {m:'10',day:31},
      {m:'11',day:30},
      {m:'12',day:31},
    ],
    month: [],
    day: [],
    monthIndex: 0,
    dayIndex: 0,
    value: [0,0]
  },
  lifetimes: {
    attached() {
      const _date = new Date()
      const monthIndex = _date.getMonth()
      const dayIndex = _date.getDate() - 1
      this.setData({
        monthIndex,dayIndex,
      },() => {
        setTimeout(() => {
          this.setData({
            value: [monthIndex,dayIndex]
          })
        },600)
        this.initDate()
      })
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    // 初始化日期
	initDate() {
		const month = this.data.month_day.map(item => item.m)
		const dayNum = this.data.month_day[this.data.monthIndex].day
		const day = []
		for(let i = 1; i <= dayNum;i++) {
			day.push(i)
        }
        this.setData({
          month,day
        })
	},
	// 拼接日期
	confirmPop() {
		const date = this.data.month[this.data.monthIndex] + '-' + this.data.day[this.data.dayIndex]
        this.close()
        this.triggerEvent('change',date)
	},
	show() {
        this.setData({
          isShow: true
        })
	},
	close() {
        this.setData({
          isShow: false
        })
	},
	// 日期变化
	dateChange(e) {
		this.setData({
		    monthIndex: e.detail.value[0],
		    dayIndex: e.detail.value[1]
		  })
		this.initDate()
	},
  }
})

期望：不积跬步无以至千里，前端之路漫漫长，一点一点进步。发言来自某个入行两年多一点的前端菜鸟。
tips：有不完善的地方希望大家多多指正。