<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>
网友回复
python如何实现声纹识别用户进行验证?
在哪可找到各种影视经典角色的配音并克隆音色根据文本说话?
阿里通义大模型哪些是支持多模态的api的ai模型?
js如何实现浏览器中离线语音唤醒语音聊天小助手?
浏览器中如何将WebM视频转成mp4视频?
parlant如何改成qwen 的apikey与baseurl?
如何写一个chrome插件实现截屏自动生成步骤图文教程转成pdf或网页?
python如何通过阿里云的api对域名进行解析和ecs主机服务器进行启动停止等操作?
Tesla Robotaxi可以让特斯拉车自动无人驾驶跑滴滴为车主赚钱,国内以后也会这样吗?
有没有可以监控安卓手机上的app打开后偷偷摸摸做了啥的监控软件?