<template>
<view class="swiper-container align-center">
<swiper
vertical
class="swiper"
:current="currentYearIndex"
@change="onYearChange"
:duration="300"
:display-multiple-items="4"
:circular="true"
>
<swiper-item v-for="(year, index) in years" :key="index">
<view :class="'item '+(currentYearIndex==index?'curent':'nocrt')" >{{ year }}</view>
</swiper-item>
</swiper>
<swiper
vertical
class="swiper"
:current="currentMonthIndex"
@change="onMonthChange"
:duration="300"
:display-multiple-items="4"
:circular="true"
>
<swiper-item v-for="(month, index) in months" :key="index">
<view :class="'item '+(currentMonthIndex==index?'curent':'nocrt')" >{{ month }}</view>
</swiper-item>
</swiper>
<swiper
vertical
class="swiper"
:current="currentDayIndex"
@change="onDayChange"
:duration="300"
:display-multiple-items="4"
:circular="true"
>
<swiper-item v-for="(day, index) in days" :key="index">
<view :class="'item '+(currentDayIndex==index?'curent':'nocrt')" >{{ day }}</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
years: [], // 年份数组
currentYearIndex: 0, // 当前选中的年份索引
months: [], // 月份数组
currentMonthIndex: 0, // 当前选中的月份索引
days: [], // 日期数组
currentDayIndex: 0 // 当前选中的日期索引
};
},
computed: {
currentYear() {
return this.years[this.currentYearIndex];
},
currentMonth() {
return this.months[this.currentMonthIndex];
},
currentDay() {
return this.days[this.currentDayIndex];
}
},
mounted() {
this.initDateData();
//plus.runtime.openURL( "http://baidu.com", err=>{} );
},
methods: {
// 初始化日期数据
initDateData() {
const currentYear = new Date().getFullYear();
this.years = Array.from({ length: 50 }, (_, i) => String(currentYear - i)); // 从当前年份往前推50年
this.currentYearIndex = 0; // 默认选中第一个年份
this.months = Array.from({ length: 12 }, (_, i) => String(i + 1)); // 月份从1到12
this.currentMonthIndex = 0; // 默认选中第一个月份
this.updateDays(); // 初始化日期数组
},
// 更新日期数组
updateDays() {
const year = Number(this.currentYear);
const month = Number(this.currentMonth);
const lastDay = new Date(year, month, 0).getDate(); // 获取当月的最后一天
this.days = Array.from({ length: lastDay }, (_, i) => String(i + 1)); // 日期从1到当月的最后一天
this.currentDayIndex = 0; // 默认选中第一天
},
// 年份变化时触发
onYearChange(e) {
this.currentYearIndex = e.detail.current;
this.updateDays(); // 年份变化时更新日期数组
},
// 月份变化时触发
onMonthChange(e) {
this.currentMonthIndex = e.detail.current;
this.updateDays(); // 月份变化时更新日期数组
},
// 日期变化时触发
onDayChange(e) {
this.currentDayIndex = e.detail.current;
}
}
};
</script>
<style scoped>
.swiper-container {
display: flex;
flex-direction: row;
padding: 20px;
justify-items: center;
}
.swiper{
width: 50px;
height: 120px;
}
.curent{
color: black;
font-size: 16px;
}
.item{
margin: 10px;
text-align: center;
}
.nocrt{
font-size: 10px;
color: grey;
}
</style>
网友回复


