仿iOS风格日期选择器设计与实现-CSDN博客

本文链接：https://blog.csdn.net/weixin_31620365/article/details/141614367

简介：仿iOS日期选择器以其独特的滚动轮样式和良好的用户体验而著称。本教程将详细讲解如何使用JavaScript实现一个仿iOS风格的日期选择器，并提供一个可供直接运行的代码示例。通过了解其设计思路、技术选型、代码实现和滚动事件处理，开发者可以创建出既美观又实用的日期选择组件，为用户提供一致且直观的交互体验。仿ios日期选择

1. 仿iOS日期选择器设计思路与实现原理

仿iOS日期选择器是一种流行且用户友好的日期选择控件，在移动应用程序中广泛使用。其设计思路和实现原理如下：

设计思路：

直观交互： 用户通过滚动手势直接选择日期，操作简单便捷。
视觉反馈： 滚动过程中，当前选择日期始终处于屏幕中心，提供清晰的视觉反馈。
惯性效果： 滚动时，选择器会产生惯性效果，增强交互体验。

2. JavaScript技术选型

2.1 JavaScript库的选择

在JavaScript库的选择上，我们需要考虑以下因素：

功能性： 库是否提供了我们需要的功能，例如日期选择、移动端适配和响应式设计。
性能： 库的性能是否足够好，不会影响页面的加载速度和用户体验。
文档和支持： 库是否有良好的文档和支持，方便我们学习和使用。

经过综合考虑，我们选择了以下两个JavaScript库：

dayjs： 一个轻量级的日期处理库，提供丰富的日期操作功能。
vue.js： 一个渐进式JavaScript框架，用于构建交互式用户界面。

dayjs 库提供了我们需要的日期选择功能，并且性能优异。 vue.js 框架提供了响应式设计和数据绑定的支持，方便我们构建用户界面。

2.2 移动端适配与响应式设计

为了确保日期选择器在不同设备上都能正常显示和使用，我们需要进行移动端适配和响应式设计。

移动端适配

移动端适配主要是针对移动设备的屏幕尺寸和交互方式进行优化。例如，我们可以使用媒体查询来检测设备的屏幕尺寸，并根据不同尺寸调整日期选择器的布局和交互方式。

响应式设计

响应式设计是指网站或应用能够根据用户的设备和屏幕尺寸自动调整布局和样式。我们可以使用CSS媒体查询和弹性布局来实现响应式设计。

通过移动端适配和响应式设计，我们可以确保日期选择器在各种设备上都能获得良好的用户体验。

3. HTML结构、CSS样式和JavaScript逻辑

3.1 HTML结构设计

仿iOS日期选择器的HTML结构设计遵循了语义化和模块化的原则。整体结构由一个包含日期选择器的父容器和三个子容器组成，分别用于显示年份、月份和日期。

<div class="date-picker">
  <div class="year-container">
    <button class="year-prev-btn">←</button>
    <span class="year-label">2023</span>
    <button class="year-next-btn">→</button>
  </div>
  <div class="month-container">
    <button class="month-prev-btn">←</button>
    <span class="month-label">January</span>
    <button class="month-next-btn">→</button>
  </div>
  <div class="day-container">
    <div class="day-grid">
      <button class="day-btn" data-day="1">1</button>
      <button class="day-btn" data-day="2">2</button>
      ...
      <button class="day-btn" data-day="31">31</button>
    </div>
  </div>
</div>

3.1.1 语义化

HTML结构使用语义化的元素，如 <div> 、 <span> 和 <button> ，清楚地表达了内容的含义和结构。

3.1.2 模块化

三个子容器将日期选择器的不同部分封装成独立的模块，提高了代码的可维护性和可重用性。

3.2 CSS样式定制

CSS样式负责控制日期选择器的外观和布局。它使用Flexbox和Grid布局来创建灵活且响应式的界面。

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

.year-container, .month-container, .day-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.year-label, .month-label {
  font-size: 1.5rem;
  margin: 0 10px;
}

.day-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.day-btn {
  width: 30px;
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  cursor: pointer;
}

.day-btn:hover {
  background-color: #eee;
}

.day-btn.selected {
  background-color: #007bff;
  color: #fff;
}

3.2.1 响应式设计

CSS样式使用媒体查询来适应不同的屏幕尺寸，确保日期选择器在移动设备和桌面设备上都能正常显示。

3.3 JavaScript逻辑实现

JavaScript逻辑负责日期选择器的交互行为，包括日期导航、日期选择和状态管理。

const datePicker = document.querySelector('.date-picker');

// 日期导航
const yearPrevBtn = document.querySelector('.year-prev-btn');
const yearNextBtn = document.querySelector('.year-next-btn');
const monthPrevBtn = document.querySelector('.month-prev-btn');
const monthNextBtn = document.querySelector('.month-next-btn');

yearPrevBtn.addEventListener('click', () => {
  // 更新年份
  const year = parseInt(datePicker.querySelector('.year-label').textContent);
  datePicker.querySelector('.year-label').textContent = year - 1;

  // 更新日期
  updateDays();
});

yearNextBtn.addEventListener('click', () => {
  // 更新年份
  const year = parseInt(datePicker.querySelector('.year-label').textContent);
  datePicker.querySelector('.year-label').textContent = year + 1;

  // 更新日期
  updateDays();
});

monthPrevBtn.addEventListener('click', () => {
  // 更新月份
  const month = datePicker.querySelector('.month-label').textContent;
  const monthIndex = months.indexOf(month);
  datePicker.querySelector('.month-label').textContent = months[monthIndex - 1];

  // 更新日期
  updateDays();
});

monthNextBtn.addEventListener('click', () => {
  // 更新月份
  const month = datePicker.querySelector('.month-label').textContent;
  const monthIndex = months.indexOf(month);
  datePicker.querySelector('.month-label').textContent = months[monthIndex + 1];

  // 更新日期
  updateDays();
});

// 日期选择
const dayBtns = document.querySelectorAll('.day-btn');
dayBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    // 选中日期
    const day = parseInt(btn.getAttribute('data-day'));
    const month = datePicker.querySelector('.month-label').textContent;
    const year = parseInt(datePicker.querySelector('.year-label').textContent);
    datePicker.dispatchEvent(new CustomEvent('date-selected', {
      detail: {
        day,
        month,
        year
      }
    }));
  });
});

// 状态管理
const selectedDate = {
  day: null,
  month: null,
  year: null
};

datePicker.addEventListener('date-selected', (e) => {
  // 更新状态
  selectedDate.day = e.detail.day;
  selectedDate.month = e.detail.month;
  selectedDate.year = e.detail.year;

  // 更新UI
  updateSelectedDateUI();
});

// 更新UI
function updateSelectedDateUI() {
  // 更新选中的日期按钮
  const selectedDayBtn = document.querySelector(`.day-btn[data-day="${selectedDate.day}"]`);
  selectedDayBtn.classList.add('selected');

  // 更新月份和年份
  datePicker.querySelector('.month-label').textContent = selectedDate.month;
  datePicker.querySelector('.year-label').textContent = selectedDate.year;
}

// 更新日期
function updateDays() {
  // 获取当前月份和年份
  const month = datePicker.querySelector('.month-label').textContent;
  const year = parseInt(datePicker.querySelector('.year-label').textContent);

  // 计算当前月份的天数
  const daysInMonth = new Date(year, months.indexOf(month) + 1, 0).getDate();

  // 清空日期网格
  const dayGrid = datePicker.querySelector('.day-grid');
  dayGrid.innerHTML = '';

  // 生成日期按钮
  for (let i = 1; i <= daysInMonth; i++) {
    const dayBtn = document.createElement('button');
    dayBtn.classList.add('day-btn');
    dayBtn.setAttribute('data-day', i);
    dayBtn.textContent = i;
    dayGrid.appendChild(dayBtn);
  }
}

3.3.1 事件处理

JavaScript逻辑使用事件监听器来处理日期导航和日期选择事件，并通过自定义事件来传递选中的日期。

3.3.2 状态管理

selectedDate 对象用于管理选中的日期，并通过自定义事件进行更新。

3.3.3 UI更新

updateSelectedDateUI() 和 updateDays() 函数负责更新日期选择器的UI，包括选中的日期按钮、月份和年份。

4. 滚动事件处理

4.1 滚动事件监听与处理

滚动事件处理是日期选择器实现的关键部分。当用户滚动日期选择器时，需要实时更新显示的日期和月份。为了监听滚动事件，可以使用 JavaScript 的 addEventListener() 方法为日期选择器的容器元素添加 scroll 事件监听器。

containerElement.addEventListener('scroll', handleScroll);

handleScroll 函数是滚动事件处理函数，负责处理滚动事件并更新日期选择器。在该函数中，需要获取滚动条的当前位置，并根据滚动条的位置计算出当前显示的日期和月份。

function handleScroll() {
  const scrollTop = containerElement.scrollTop;
  const scrollLeft = containerElement.scrollLeft;

  // 根据滚动条位置计算当前显示的日期和月份
  const currentDate = calculateCurrentDate(scrollTop, scrollLeft);
  const currentMonth = calculateCurrentMonth(scrollTop, scrollLeft);

  // 更新日期选择器显示的日期和月份
  updateDisplay(currentDate, currentMonth);
}

4.2 滚动惯性与阻尼效果

为了让日期选择器滚动更加平滑自然，可以添加滚动惯性和阻尼效果。滚动惯性是指当用户停止滚动时，日期选择器会继续滚动一段时间。阻尼效果是指滚动速度会逐渐减慢，直至停止。

实现滚动惯性，可以使用 JavaScript 的 requestAnimationFrame() 函数。在 handleScroll 函数中，调用 requestAnimationFrame() 函数，并传入一个回调函数。回调函数负责更新日期选择器的滚动位置。

function handleScroll() {
  // ...

  // 添加滚动惯性
  requestAnimationFrame(updateScrollPosition);
}

function updateScrollPosition() {
  // 更新日期选择器的滚动位置

  // 继续调用 requestAnimationFrame()，直到滚动停止
  requestAnimationFrame(updateScrollPosition);
}

实现阻尼效果，可以使用 JavaScript 的 setTimeout() 函数。在 updateScrollPosition 函数中，使用 setTimeout() 函数延迟更新滚动位置，从而实现滚动速度逐渐减慢的效果。

function updateScrollPosition() {
  // ...

  // 添加阻尼效果
  setTimeout(() => {
    // 更新日期选择器的滚动位置
    updateScrollPosition();
  }, 100);
}

4.3 滚动范围限制与边界处理

为了防止日期选择器滚动超出范围，需要限制滚动范围并处理边界情况。可以设置日期选择器的最小和最大滚动位置，当滚动条达到边界时，停止滚动。

containerElement.style.overflow = 'hidden';
containerElement.style.scrollBehavior = 'smooth';
containerElement.style.touchAction = 'pan-y';

通过设置 overflow 为 hidden ，可以隐藏滚动条。设置 scrollBehavior 为 smooth ，可以使滚动更加平滑。设置 touchAction 为 pan-y ，可以禁用水平滚动。

// 设置最小和最大滚动位置
containerElement.minScrollTop = 0;
containerElement.maxScrollTop = containerElement.scrollHeight - containerElement.clientHeight;
containerElement.minScrollLeft = 0;
containerElement.maxScrollLeft = containerElement.scrollWidth - containerElement.clientWidth;

// 处理边界情况
containerElement.addEventListener('scroll', () => {
  if (containerElement.scrollTop < containerElement.minScrollTop) {
    containerElement.scrollTop = containerElement.minScrollTop;
  } else if (containerElement.scrollTop > containerElement.maxScrollTop) {
    containerElement.scrollTop = containerElement.maxScrollTop;
  }

  if (containerElement.scrollLeft < containerElement.minScrollLeft) {
    containerElement.scrollLeft = containerElement.minScrollLeft;
  } else if (containerElement.scrollLeft > containerElement.maxScrollLeft) {
    containerElement.scrollLeft = containerElement.maxScrollLeft;
  }
});

5.1 CSS动画优化

为了提升日期选择器的流畅性和用户体验，需要对CSS动画进行优化。

1. 减少动画次数

通过减少动画的触发次数，可以有效降低CPU消耗。例如，在滚动过程中，仅当滚动距离达到一定阈值时才触发动画。

2. 优化动画性能

使用硬件加速和GPU渲染技术可以显著提升动画性能。在CSS中，可以通过 transform 和 translate 属性来实现硬件加速。

.date-picker {
  transform: translate3d(0, 0, 0);
}

3. 使用过渡动画

过渡动画可以平滑地改变元素的属性，避免突然变化带来的视觉不适。在CSS中，可以使用 transition 属性来实现过渡动画。

.date-picker {
  transition: transform 0.3s ease-out;
}

5.2 状态管理与数据绑定

状态管理和数据绑定是优化日期选择器交互体验的关键。

1. 状态管理

使用状态管理工具可以集中管理日期选择器的状态，方便不同组件之间的通信和数据同步。例如，可以使用Vuex或Redux等状态管理库。

2. 数据绑定

数据绑定可以实现组件之间数据的自动同步。在日期选择器中，可以将日期数据绑定到输入框或其他组件，实现实时更新和交互。

// Vue.js示例
<input v-model="selectedDate">

5.3 时间选择功能扩展

为了满足更丰富的需求，可以对日期选择器进行时间选择功能扩展。

1. 时间选择器

添加时间选择器，允许用户选择具体的时间。可以使用现成的库或自定义实现时间选择器。

// 使用第三方库
import TimePicker from 'timepicker';

2. 时间范围选择

支持时间范围选择，允许用户选择开始时间和结束时间。这在预约系统或日程安排等场景中非常有用。

// 自定义实现时间范围选择
const startTime = new Date();
const endTime = new Date();

5.4 无障碍性优化

无障碍性优化对于确保所有用户都能使用日期选择器至关重要。

1. 键盘导航

支持键盘导航，允许用户使用键盘操作日期选择器。这对于视障或行动不便的用户非常重要。

// 添加键盘事件监听
document.addEventListener('keydown', (e) => {
  // 处理键盘导航逻辑
});

2. 屏幕阅读器支持

确保日期选择器可以被屏幕阅读器正确识别和读出。这可以通过添加适当的ARIA属性和标签来实现。

<div class="date-picker" aria-label="日期选择器">
  <!-- ... -->
</div>

本文还有配套的精品资源，点击获取 menu-r.4af5f7ec.gif