别再把体积交给better-scroll！手写组件实现纯原生年月日期选择器！**

2023-12-01 03:06:33

正文：

在移动端开发中，日期选择器是一种常见组件，它允许用户轻松选择日期。然而，许多现有的日期选择器都使用了better-scroll作为移动端滚动插件，这无疑会增加项目的体积。

更好的做法是，自己实现一个不使用插件的日期选择器。这样，我们就可以减少项目体积，提升性能。

实现原理：

我们要实现一个只包含年月的日期选择器。布局代码如下：

<div class="date-picker">
  <div class="year-picker">
    <div class="year-list">
      <div class="year-item">2023</div>
      <div class="year-item">2024</div>
      <div class="year-item">2025</div>
    </div>
  </div>
  <div class="month-picker">
    <div class="month-list">
      <div class="month-item">1月</div>
      <div class="month-item">2月</div>
      <div class="month-item">3月</div>
    </div>
  </div>
</div>

CSS样式代码如下：

.date-picker {
  display: flex;
  align-items: center;
}

.year-picker, .month-picker {
  flex: 1;
  overflow: auto;
}

.year-list, .month-list {
  display: flex;
  flex-direction: column;
}

.year-item, .month-item {
  padding: 10px;
}

.year-item:hover, .month-item:hover {
  background-color: #efefef;
}

.year-item.active, .month-item.active {
  background-color: #007bff;
  color: #fff;
}

JavaScript代码如下：

const yearPicker = document.querySelector('.year-picker');
const monthPicker = document.querySelector('.month-picker');

const yearList = document.querySelector('.year-list');
const monthList = document.querySelector('.month-list');

const yearItems = document.querySelectorAll('.year-item');
const monthItems = document.querySelectorAll('.month-item');

let selectedYear = null;
let selectedMonth = null;

yearItems.forEach((yearItem) => {
  yearItem.addEventListener('click', () => {
    selectedYear = parseInt(yearItem.textContent);
    yearItems.forEach((item) => {
      item.classList.remove('active');
    });
    yearItem.classList.add('active');
  });
});

monthItems.forEach((monthItem) => {
  monthItem.addEventListener('click', () => {
    selectedMonth = parseInt(monthItem.textContent);
    monthItems.forEach((item) => {
      item.classList.remove('active');
    });
    monthItem.classList.add('active');
  });
});

const onDateChange = (year, month) => {
  // 处理日期变化的逻辑
};

setInterval(() => {
  if (selectedYear && selectedMonth) {
    onDateChange(selectedYear, selectedMonth);
  }
}, 100);