首先创建wxml结构
<picker-view class="pickerView" indicator-style="height: 40px;" :value="value" @change="bindDateChangeStart" @click.stop="">
<picker-view-column class="pickerColumn">
<div class="pickerItem" v-for="(item,key) in years" :key='key'>{{item}}年</div>
</picker-view-column>
<picker-view-column class="pickerColumn">
<div class="pickerItem" v-for="(item,key) in months" :key='key'>{{item}}月</div>
</picker-view-column>
<picker-view-column class="pickerColumn">
<div class="pickerItem" v-for="(item,key) in days" :key='key'>{{item}}日</div>
</picker-view-column>
</picker-view>
然后我们定义数据
data(){
return {
years: 0,
months: 0,
days: 0,
value: [8, 1, 1],//默认滚动的索引值
}
}
然后我们初始化数据initDatas
initDatas () {
const date = new Date()
const nowYear = date.getFullYear()
const nowMonth = date.getMonth() + 1
const nowDay = date.getDate()
this.year = nowYear
this.month = nowMonth
this.day = nowDay
// 循环前先清空数组
this.years = []
this.months = []
for (let i = nowYear-30; i <= nowYear; i++) {
this.years.push(i)
}
// 设置月份列表
for (let i = 1; i <= 12; i++) {
this.months.push(i)
}
// 初始化当前年月
if(this.birthday && this.birthday.indexOf('-')!=-1){
var birthday_obj = this.birthday.split('-');
this.getMonth(parseInt(birthday_obj[0]), parseInt(birthday_obj[1]), parseInt(birthday_obj[2]))
}else{
this.getMonth(nowYear, nowMonth, nowDay)
}
},
getMonth (year, month, day) {
let daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
let dayNum = 0
// 通过年和月获取这个月份下有多少天
if (month === 2) { // 闰年
dayNum = ((year % 4 === 0) && ((year % 100) !== 0)) || (year % 400 === 0) ? 29 : 28
} else {
dayNum = daysInMonth[month - 1]
}
this.days = []
for (let i = 1; i <= dayNum; i++) {
this.days.push(i)
}
// 初始 选中年月日对应下标
let yearIdx = 0
let monthIdx = 0
let dayIdx = 0
// 获取滚动后 年月日对应的下标
this.years.map((v, idx) => {
if (v === year) {
yearIdx = idx
}
})
this.months.map((v, idx) => {
if (v === month) {
monthIdx = idx
}
})
this.days.map((v, idx) => {
if (v === day) {
dayIdx = idx
}
})
// 重置滚动后 年月日 的下标
this.value = [yearIdx, monthIdx, dayIdx]
// 赋值年月日
this.year = this.years[yearIdx]
this.month = this.months[monthIdx]>9?this.months[monthIdx]:'0'+this.months[monthIdx]
this.day = this.days[dayIdx]>9?this.days[dayIdx]:'0'+this.days[dayIdx]
},
当用户滑动的时候，触发bindDateChangeStart事件
bindDateChangeStart (e) {
// valIndex 是获取到的年月日在各自集合中的下标
const valIndex = e.mp.detail.value
// console.log(JSON.stringify(e.mp.detail.value))
let year = this.years[valIndex[0]]
let month = this.months[valIndex[1]]
let day = this.days[valIndex[2]]
// 滚动时再动态 通过年和月获取 这个月下对应有多少天
this.getMonth(year, month, day)
},
