+
95
-

回答

<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>

网友回复

我知道答案,我要回答