<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>
					网友回复
- threejs如何做个三维搭积木的游戏?
- three如何实现标记多个起始路过地点位置后选择旅行工具(飞机汽车高铁等),最后三维模拟行驶动画导出mp4?
- ai实时驱动的3d数字人可视频聊天的开源技术有吗
- swoole+phpfpm如何实现不同域名指向不同目录的多租户模式?
- 如何用go替换nginx实现请求phpfpm解析运行php脚本?
- 有没有浏览器离线运行进行各种文档、图片、视频格式转换的开源工具?
- 如何使用go语言搭建一个web防火墙?
- linux如何检测特定网络协议比如http协议中报文是否包含特点关键词并阻止返回给客户?
- 如果在nginx外过滤包含某些关键词的网页并阻止打开?
- 程序员怎么做副业赚钱?



 
				 
			 
			 
				 
			