vue3 setup+Taro3 調(diào)用原生小程序自定義年月日時(shí)分多列選擇器，NutUI改造

NutUI 有日期時(shí)間選擇器，但是滑動(dòng)效果太差，卡頓明顯。換成 原生小程序 很順暢

上代碼：

<template>
  <view>
    <picker
      mode="multiSelector"
      @change="confirmPicker"
      @columnChange="scrollColumnChange"
      :value="columnVal"
      :range="multiArray"
    >
      <nut-cell
        title="選擇時(shí)間"
        :desc="showVal"
        @click="copyColumnVal = columnVal"
      ></nut-cell>
      <!-- <view @click="copyColumnVal = columnVal">
        當(dāng)前選擇：{{ showVal }}
      </view> -->
    </picker>
  </view>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
const multiArray = ref(undefined); // 列可選列表
const columnVal = ref(undefined); // 列當(dāng)前選中值
const copyColumnVal = ref(undefined); // 記錄滾動(dòng)中數(shù)據(jù)
const showVal = ref(undefined); // 顯示：后年月日時(shí)分

// 個(gè)位數(shù)時(shí) 補(bǔ)0
const add0 = (num) => String(num > 9 ? num : "0" + num);

// 判斷平年閏年
const resYearType = (year) =>
  (year % 4 == 0) & (year % 100 != 0) || year % 400 == 0;

// 獲取當(dāng)前時(shí)間
const getNowT = (timeInfo) => {
  // timeInfo 為 年月日字符串 或者 時(shí)間戳
  var nowT = new Date(timeInfo);
  return {
    year: nowT.getFullYear(),
    month: nowT.getMonth() + 1,
    day: nowT.getDate(),
    hour: nowT.getHours(),
    minute: nowT.getMinutes(),
    second: nowT.getSeconds(),
  };
};

// 設(shè)置當(dāng)前時(shí)間 - columnVal：每列索引數(shù)組集合
function setNowTime(timeStr) {
  const timeObj = getNowT(timeStr); // timeObj 為： { year, month, day... }
  const { year, month, day, hour, minute } = timeObj;
  // 獲取滾動(dòng)列表數(shù)據(jù)
  const [
    years,
    months,
    days,
    hours,
    minutes,
  ] = multiArray.value;
  const yearsIdx = years.findIndex((item) => item == year);
  const monthsIdx = months.findIndex((item) => item == month);
  const daysIdx = days.findIndex((item) => item == day);
  const hoursIdx = hours.findIndex((item) => item == hour);
  const minutesIdx = minutes.findIndex((item) => item == minute);
  columnVal.value = [yearsIdx, monthsIdx, daysIdx, hoursIdx, minutesIdx];
  showVal.value = `${year}/${add0(month)}/${add0(day)} ${add0(hour)}:${add0(
    minute
  )}`;

  // 根據(jù)當(dāng)前時(shí)間，初始化可選擇日期時(shí)間
  setDaysList(columnVal.value)
}

// 初始化時(shí)間
function initColumn(daysNum = 31) {
  // 年
  const yearStart = 2000; // 年 - 開始時(shí)間
  const yearLength = 100; // 年 - 列表長度
  const years = Array.from({ length: yearLength }).map((i, idx) =>
    add0((idx += yearStart))
  );

  // 月
  const months = Array.from({ length: 12 }).map((i, idx) => add0((idx += 1)));

  // 日
  const days = Array.from({ length: daysNum }).map((i, idx) =>
    add0((idx += 1))
  );

  // 時(shí)
  const hours = Array.from({ length: 24 }).map((i, idx) => add0((idx += 0)));

  // 分
  const minutes = Array.from({ length: 60 }).map((i, idx) => add0((idx += 0)));

  multiArray.value = [
    years,
    months,
    days,
    hours,
    minutes,
  ];
}

// 滾動(dòng)設(shè)置可選天數(shù) 28 - 29 - 30 - 31
function setDays(daysNum = 31) {
  multiArray.value[2] = Array.from({ length: daysNum }).map((i, idx) =>
    add0((idx += 1))
  );

  // 深拷貝下，否則不動(dòng)態(tài)修改列
  multiArray.value = JSON.parse(JSON.stringify(multiArray.value));
}

// 修改每月的天數(shù)
function setDaysList(columnArr) {
  const [yearsIdx, monthsIdx] = columnArr;
  const [years] = multiArray.value;
  // 當(dāng)選擇2月
  if (monthsIdx == 1) {
    // 如果閏年
    if (resYearType(years[yearsIdx])) {
      setDays(29);
    } else {
      setDays(28);
    }
  } else if ([1, 3, 5, 7, 8, 10, 12].includes(monthsIdx + 1)) {
    // 當(dāng)選擇1, 3, 5, 7, 8, 10, 12月
    setDays(31);
  } else {
    setDays(30);
  }
}

// 確認(rèn)選中結(jié)果
function confirmPicker(e) {
  columnVal.value = e.detail.value;
  const [yearsIdx, monthsIdx, daysIdx, hoursIdx, minutesIdx] = e.detail.value;
  const [years, months, days, hours, minutes] = multiArray.value;
  showVal.value = `${years[yearsIdx]}/${months[monthsIdx]}/${days[daysIdx]} ${hours[hoursIdx]}:${minutes[minutesIdx]}`;
}

// 滾動(dòng)事件（未點(diǎn)擊確定）
function scrollColumnChange(e) {
  const { column, value } = e.detail;
  copyColumnVal.value[column] = value;
  setDaysList(copyColumnVal.value);

  console.log("修改的列為", column, "，值為", value);
}

// 初始化
onMounted(() => {
  initColumn();

  // 回顯時(shí)間
  setNowTime(new Date().getTime());
});


// 監(jiān)聽傳遞日期
const props = defineProps({
  propsTime: {
    type: String,
    default: ''
  }
})
watch(props.propsTime, (newValue, oldValue) => {
  console.log('值發(fā)生了變更', newValue, oldValue);
  // 回顯時(shí)間
  setNowTime(newValue);
});

</script>

若需要自定義年開始時(shí)間，見 initColumn 方法

如作為組件，通過父級(jí)傳遞，可使用：

文章來源地址http://www.zghlxwxcb.cn/news/detail-641760.html

到了這里，關(guān)于vue3 setup+Taro3 調(diào)用原生小程序自定義年月日時(shí)分多列選擇器，NutUI改造的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！