<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>
网友回复