【UniApp 日期选择器实现与样式优化实践】

UniApp 日期选择器实现与样式优化实践

发布时间：2025/6/26

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

前言

在移动端应用开发中，日期选择器是一个常见且重要的交互组件。本文将分享我们在 UniApp 项目中实现自定义日期选择器的经验，特别是在样式优化过程中遇到的问题及解决方案。通过这个案例，希望能为大家在 UniApp 组件开发中提供一些参考。

需求分析

在我们的业务场景中，需要一个支持年、月、日三种维度的日期选择器，具有以下特点：

  1. 多维度选择：支持年、月、日三种维度的切换
  2. 自定义样式：符合设计规范的 UI 样式
  3. 良好交互：滑动流畅，选中项明显
  4. 默认值设置：支持设置默认日期和默认维度

基于以上需求，我们决定基于 UniApp 的 picker-view 组件进行二次开发，实现一个自定义的日期选择器组件。

基础实现

组件结构

<template><view class="date-picker-drawer"><!-- 遮罩层 --><view v-if="visible" class="drawer-mask" @click="handleClose"></view><!-- 抽屉内容 --><view class="drawer-content" :class="{ show: visible }"><!-- 头部 --><view class="drawer-header"><view class="placeholder-btn"></view><view class="header-title">时间维度</view><view class="close-btn" @click="handleClose">×</view></view><!-- 标签页 --><view class="tab-container"><viewv-for="(tab, index) in tabs":key="tab.value"class="tab-item":class="{ active: currentTab === tab.value }"@click="switchTab(tab.value)">{{ tab.label }}</view></view><!-- 当前选中日期显示 --><view class="current-date"><text class="date-text">{{ formatCurrentDate }}</text></view><!-- 日期选择器 --><view class="picker-container"><picker-viewclass="picker-view":value="pickerValue"@change="handlePickerChange"mask-class="picker-mask"><!-- 年份列 --><picker-view-column><view v-for="year in yearList" :key="year" class="picker-item">{{ year }}年</view></picker-view-column><!-- 月份列 --><picker-view-column v-if="currentTab !== 'year'"><view v-for="month in monthList" :key="month" class="picker-item">{{ month }}月</view></picker-view-column><!-- 日期列 --><picker-view-column v-if="currentTab === 'day'"><view v-for="day in dayList" :key="day" class="picker-item">{{ day }}日</view></picker-view-column></picker-view></view><!-- 确定按钮 --><view class="confirm-btn" @click="handleConfirm">确定</view></view></view>
</template>

核心逻辑

  1. 数据初始化：
// Props 和 Emits
const props = withDefaults(defineProps<Props>(), {defaultDate: () => new Date(),defaultTab: 'year',minYear: () => new Date().getFullYear() - 3,maxYear: () => new Date().getFullYear() + 3
});// 响应式数据
const currentTab = ref<'day' | 'month' | 'year'>(props.defaultTab);
const selectedDate = ref(new Date(props.defaultDate));
const pickerValue = ref([0, 0, 0]);
  1. 动态计算年月日列表：
// 年份列表
const yearList = computed(() => {const years = [];const minYear = Math.min(props.minYear, props.maxYear);const maxYear = Math.max(props.minYear, props.maxYear);for (let i = minYear; i <= maxYear; i++) {years.push(i);}return years;
});// 月份列表
const monthList = computed(() => {const months = [];for (let i = 1; i <= 12; i++) {months.push(i);}return months;
});// 日期列表
const dayList = computed(() => {const yearIndex = Math.min(Math.max(0, pickerValue.value[0]), yearList.value.length - 1);const monthIndex = Math.min(Math.max(0, pickerValue.value[1]), monthList.value.length - 1);const year = yearList.value[yearIndex] || new Date().getFullYear();const month = monthList.value[monthIndex] || 1;// 计算该月的天数const daysInMonth = new Date(year, month, 0).getDate();const days = [];for (let i = 1; i <= daysInMonth; i++) {days.push(i);}return days;
});
  1. 选择器值初始化：
const initPickerValue = () => {const year = selectedDate.value.getFullYear();const month = selectedDate.value.getMonth() + 1;const day = selectedDate.value.getDate();// 确保年份在可选范围内const safeYear = Math.max(props.minYear, Math.min(props.maxYear, year));// 查找年份在列表中的索引const yearIndex = yearList.value.findIndex((y) => y === safeYear);// 月份和日期索引const monthIndex = month - 1;const dayIndex = day - 1;// 确保索引有效const validYearIndex = yearIndex >= 0 ? yearIndex : 0;const validMonthIndex = monthIndex >= 0 && monthIndex < 12 ? monthIndex : 0;const validDayIndex = dayIndex >= 0 && dayIndex < dayList.value.length ? dayIndex : 0;pickerValue.value = [validYearIndex, validMonthIndex, validDayIndex];
};
  1. 处理选择器变化：
const handlePickerChange = (e: any) => {const values = e.detail.value;// 设置标志位，表示用户正在操作isUserChanging.value = true;// 确保索引有效const validValues = [Math.min(Math.max(0, values[0]), yearList.value.length - 1),Math.min(Math.max(0, values[1] || 0), monthList.value.length - 1),Math.min(Math.max(0, values[2] || 0), dayList.value.length - 1)];pickerValue.value = validValues;// 获取实际选中的值const yearIndex = validValues[0];const year = yearList.value[yearIndex];let month = 1;let day = 1;if (currentTab.value !== 'year' && validValues[1] !== undefined) {const monthIndex = validValues[1];month = monthList.value[monthIndex];}if (currentTab.value === 'day' && validValues[2] !== undefined) {const dayIndex = validValues[2];day = dayList.value[dayIndex] || 1;}// 更新selectedDateselectedDate.value = new Date(year, month - 1, day);// 延迟重置标志位，避免触发watchsetTimeout(() => {isUserChanging.value = false;}, 50);
};

样式优化过程

在实现基本功能后，我们遇到了一系列样式和交互问题，主要围绕 picker-view 组件的自定义样式。

问题一：选中项与指示器不对齐

问题描述：

在初始实现中，我们发现选中项与指示器（高亮区域）不对齐，导致视觉上的混乱。用户不清楚实际选中的是哪一项。

原因分析：

  1. picker-item 的高度与 uni-picker-view-indicator 的高度不一致
  2. 文本在 picker-item 中的垂直对齐问题

解决方案：

/* 选中项样式 */
.uni-picker-view-indicator {height: 52px;box-sizing: border-box;border-top: 1px solid rgba(0, 0, 0, 0.1);border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}.picker-item {height: 52px;line-height: 52px;display: flex;align-items: center;justify-content: center;font-size: 32px;color: rgba(0, 0, 0, 0.6);font-family: 'PingFang SC', sans-serif;font-weight: 400;padding: 0;margin: 0;
}/* 选中项文字样式 */
.uni-picker-view-indicator .picker-item {color: rgba(0, 0, 0, 0.9);font-weight: 500;
}

关键点是确保 picker-item 的高度与 uni-picker-view-indicator 的高度一致，并使用 line-height、align-items 和 justify-content 确保文本垂直居中。

问题二：最后一项选不到

问题描述：

在某些情况下，列表的最后一项无法滚动到选中位置，导致用户无法选择某些值。

原因分析：

  1. picker-view 的内部实现中，滚动计算与项目高度和容器高度相关
  2. 当 picker-item 高度与 uni-picker-view-indicator 不一致时，会导致滚动计算错误

解决方案：

  1. 增加 picker-container 的高度，确保有足够的滚动空间：
.picker-container {height: 280px;margin-bottom: 30px;
}
  1. 确保 picker-item 与 uni-picker-view-indicator 高度一致：
.uni-picker-view-indicator {height: 52px;/* 其他样式 */
}.picker-item {height: 52px;line-height: 52px;/* 其他样式 */
}

问题三：自定义样式被覆盖

问题描述：

在开发过程中，我们发现一些自定义样式被 UniApp 内部样式覆盖，特别是 indicator 的样式。

原因分析：

  1. UniApp 的 picker-view 组件有内置样式，可能会覆盖自定义样式
  2. 某些样式属性被硬编码在组件内部，难以通过外部 CSS 覆盖

解决方案：

  1. 使用 mask-class 属性自定义遮罩层样式：
<picker-viewclass="picker-view":value="pickerValue"@change="handlePickerChange"mask-class="picker-mask"
><!-- 内容 -->
</picker-view>

.picker-mask {background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)),linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6));background-position: top, bottom;background-size: 100% 88px;background-repeat: no-repeat;
}
  1. 避免使用 indicatorStyle 属性，而是通过 CSS 类选择器控制样式：
.uni-picker-view-indicator {height: 52px;box-sizing: border-box;border-top: 1px solid rgba(0, 0, 0, 0.1);border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}.uni-picker-view-indicator::before,
.uni-picker-view-indicator::after {height: 0px;
}

关键技术点与经验总结

1. 避免使用内联样式

在早期实现中，我们尝试使用 picker-view 的 indicatorStyle 属性设置样式：

<picker-view :indicator-style="indicatorStyle"><!-- 内容 -->
</picker-view>

const indicatorStyle = 'height: 48px; background-color: rgba(0, 0, 0, 0.05);';

这种方式导致了多种问题：

  • 样式难以维护和扩展
  • 与其他 CSS 规则可能冲突
  • 无法使用更复杂的 CSS 选择器

改进后，我们完全通过 CSS 类控制样式，提高了代码可维护性。

2. 同步高度设置的重要性

在日期选择器中，确保以下元素高度一致至关重要：

  • uni-picker-view-indicator（选中指示器）
  • picker-item（选项项）

这不仅影响视觉效果，还会影响滚动计算和选中逻辑。我们通过反复测试确定了 52px 是最佳高度。

3. 处理循环依赖问题

在开发过程中，我们遇到了一个棘手的问题：当选择器值变化时，会触发 selectedDate 的更新，而 selectedDate 的更新又会触发 pickerValue 的重新计算，形成循环依赖。

解决方案是添加一个标志位，区分用户操作和程序自动更新：

// 添加标志位
const isUserChanging = ref(false);// 处理选择器变化
const handlePickerChange = (e: any) => {// 设置标志位，表示用户正在操作isUserChanging.value = true;// 处理逻辑...// 延迟重置标志位setTimeout(() => {isUserChanging.value = false;}, 50);
};// 监听selectedDate变化
watch(selectedDate, (newDate) => {// 如果是用户操作导致的变化，不需要重新初始化if (!isUserChanging.value) {// 重新初始化pickerValueinitPickerValue();}
});

4. 容器高度与可滚动性

picker-view 的可滚动范围与容器高度相关。如果容器高度不足，可能导致某些项无法滚动到选中位置。我们通过增加 picker-container 的高度解决了这个问题：

.picker-container {height: 280px;margin-bottom: 30px;
}

最终效果与性能优化

经过多次调整和优化，我们的日期选择器组件实现了以下效果：

  1. 视觉一致性：选中项与指示器完美对齐
  2. 交互流畅：滚动平滑，所有项都可以选中
  3. 样式美观：符合设计规范，选中项样式明显
  4. 性能良好：避免了不必要的重新渲染

性能优化方面，我们采取了以下措施：

  1. 使用 computed 属性计算年月日列表，避免重复计算
  2. 添加 isUserChanging 标志位，减少不必要的更新
  3. 使用 setTimeout 延迟执行某些操作，确保 DOM 更新完成
  4. 优化 CSS 选择器，减少样式计算复杂度

兼容性考虑

在不同平台上，UniApp 的 picker-view 组件可能有不同的表现。我们针对主要平台进行了测试和优化：

  1. iOS：

    • 滚动惯性较强，需要调整选项间距
    • 文本渲染更精细，字体大小需要微调

  2. Android：

    • 滚动阻尼不同，可能需要调整滚动参数
    • 不同厂商的 Android 系统可能有不同表现

  3. 小程序：

    • 微信小程序中 picker-view 的实现与原生略有不同
    • 需要额外测试确保样式一致

总结与展望

通过这次日期选择器组件的开发，我们积累了丰富的 UniApp 自定义组件开发经验，特别是在处理原生组件样式自定义方面。核心经验包括：

  1. 避免使用内联样式，优先使用 CSS 类控制样式
  2. 确保相关元素的高度一致，特别是在滚动选择器中
  3. 处理好数据流向，避免循环依赖
  4. 考虑不同平台的兼容性问题

未来，我们计划进一步优化这个组件：

  1. 支持更多的日期格式和范围限制
  2. 添加农历日期支持
  3. 优化动画效果和过渡
  4. 提高跨平台兼容性

希望本文对大家在 UniApp 开发中实现自定义日期选择器有所帮助。如有任何问题或建议，欢迎在评论区留言讨论。

发布时间：2025/6/26

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/diannao/88700.shtml
繁体地址，请注明出处：http://hk.pswp.cn/diannao/88700.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

推荐系统的视频特征-视频关键帧特征提取与向量生成

推荐系统的视频特征-视频关键帧特征提取与向量生成

&#x1f4cc; 总体流程概览 视频文件 (.mp4)↓ 关键帧抽取&#xff08;FFmpeg / SceneDetect&#xff09;↓ 帧图像&#xff08;.jpg&#xff09;↓ 图像模型提取特征&#xff08;CLIP / CNN / ViT&#xff09;↓ 多帧聚合成视频向量&#xff08;均值池化等&#xff09;↓ 向…
阅读更多...
Apache SeaTunnel Flink引擎执行流程源码分析

Apache SeaTunnel Flink引擎执行流程源码分析

目录 1. 任务启动入口 2. 任务执行命令类：FlinkTaskExecuteCommand 3. FlinkExecution的创建与初始化 3.1 核心组件初始化 3.2 关键对象说明 4. 任务执行：FlinkExecution.execute() 5. Source处理流程 5.1 插件初始化 5.2 数据流生成 6. Transform处理流程 6.1 插…
阅读更多...
Vue 3 + Element Plus 实现「动态表单组件」详解教程

Vue 3 + Element Plus 实现「动态表单组件」详解教程

✅ Vue 3 Element Plus 实现「动态表单组件」详解教程 &#x1f4cc; 适用场景&#xff1a;表单字段根据配置动态生成&#xff0c;支持校验、提交、自定义组件、复杂布局等。 &#x1f9e9; 技术栈&#xff1a;Vue 3 TypeScript Element Plus &#x1f527; 核心特性&#x…
阅读更多...
本地部署开源时间跟踪工具 Kimai 并实现外部访问（ Windows 版本）

本地部署开源时间跟踪工具 Kimai 并实现外部访问（ Windows 版本）

Kimai 是一款开源的时间跟踪工具&#xff0c;它易于使用&#xff0c;并提供了强大的报告功能&#xff0c;在个人和团队记录工作时间、项目时间和活动时间等之后可以帮助用户了解他们是如何花费时间的&#xff0c;从而提高生产力和效率。本文将详细介绍如何在 Windows 系统本地部…
阅读更多...
系统分析师案例知识点

系统分析师案例知识点

目录 1 必做题1.1 状态机图1.2 活动图1.3 统一软件开发过程RUP 2 需求分析2.1 数据流图DFD2.2 ER图2.3 状态转换图STD2.4 数据字典2.5 流程图2.6 需求评审2.7 设计类2.8 FAST分析2.9 常见的关系类 3 嵌入式3.1 容器技术3.2 虚拟机技术3.3 虚拟机和容器的不同点 4 数据库4.1 NoS…
阅读更多...
多相机人脸扫描设备如何助力高效打造数字教育孪生体?

多相机人脸扫描设备如何助力高效打造数字教育孪生体?

在教育数字化转型浪潮中&#xff0c;数字孪生体作为现实教育场景的虚拟映射&#xff0c;正成为智慧教育发展的关键技术支点。传统教育模式面临师资资源分布不均、个性化教学难以覆盖、跨时空教学场景受限等痛点&#xff0c;而数字孪生体通过构建高仿真虚拟教育主体&#xff08;…
阅读更多...
用 EXCEL/WPS 实现聚类分析：赋能智能客服场景的最佳实践

用 EXCEL/WPS 实现聚类分析：赋能智能客服场景的最佳实践

聚类分析作为无监督学习的核心技术&#xff0c;能在客服数据中发现隐藏的用户群体或问题模式。尽管 Excel/WPS 并非专业统计软件&#xff0c;但巧妙利用其内置功能&#xff0c;也能实现基础的聚类分析&#xff0c;为中小型客服团队提供快速洞察。以下介绍具体方法及智能客服场景…
阅读更多...
基于定制开发开源AI智能名片S2B2C商城小程序源码的H5游戏开发模式创新研究

基于定制开发开源AI智能名片S2B2C商城小程序源码的H5游戏开发模式创新研究

摘要 本文以定制开发开源AI智能名片S2B2C商城小程序源码为技术底座&#xff0c;探讨其在H5游戏开发中的创新应用。通过分析原生开发与第三方工具两种传统开发模式的局限性&#xff0c;提出将AI智能名片的多模态内容生成能力、S2B2C商城的生态协同机制与H5游戏开发深度融合的解…
阅读更多...
vue3+ELInput无法输入的问题

vue3+ELInput无法输入的问题

vue3ElInput无法输入的问题 开篇 写业务的时候发现&#xff0c;因为想偷懒嘛&#xff0c;直接就在想在外部去定义一个变量&#xff0c;然后写个弹窗里&#xff08;tsx&#xff09;的el-input&#xff0c;而不是又去写个vue页面&#xff0c;但发现就输入不了了&#xff0c;而且…
阅读更多...
SQL Server：如何检测和修复 FILESTREAM 数据库损坏？

SQL Server：如何检测和修复 FILESTREAM 数据库损坏？

SQL Server 中的 FILESTREAM 功能可以将二进制大型对象 &#xff08;BLOB&#xff09; 存储到文件系统上&#xff0c;而不是将它们存储在数据库中。但是&#xff0c;默认情况下不启用此功能。用户需要使用 SQL Server Management Studio &#xff08;SSMS&#xff09; 和 SQL S…
阅读更多...
FORCE 开发者论坛 | 火山引擎发布多款 Agent 开发工具

FORCE 开发者论坛 | 火山引擎发布多款 Agent 开发工具

资料来源&#xff1a;火山引擎-开发者社区 6 月 12 日&#xff0c;2025 火山引擎 FORCE 原动力大会开发者论坛成功举办。大会聚焦 Agent 开发新范式&#xff0c;升级发布了 PromptPilot、MCP Servers、TRAE、扣子开发平台等产品&#xff0c;以及多款开源项目&#xff0c;构建起…
阅读更多...
【Qt-windows】如何使用perfmon 具体分析windows serverR2的Qt程序CPU问题

【Qt-windows】如何使用perfmon 具体分析windows serverR2的Qt程序CPU问题

可以使用 Windows 自带的 PerfMon&#xff08;Performance Monitor&#xff09; 工具对运行在 Windows Server R2 上的 Qt 程序进行详细的性能分析&#xff0c;尤其是 CPU 使用情况。以下是具体的操作步骤和建议&#xff1a; 一、打开 PerfMon 工具 按下 Win R 打开运行窗口。…
阅读更多...
【软考高级系统架构论文】论NoSQL数据库技术及其应用

【软考高级系统架构论文】论NoSQL数据库技术及其应用

论文真题 随着互联网web2.0网站的兴起，传统关系数据库在应对web2.0 网站，特别是超大规模和高并发的web2.0纯动态 SNS 网站上已经显得力不从心，暴露了很多难以克服的问题，而非关系型的数据库则由于其本身的特点得到了非常迅速的发展。 NoSQL(Not only SQL )的产生就是为了解…
阅读更多...
bash的配置文件,source

bash的配置文件,source

一.按生效范围分类 二.按shell登录的方式分类 这里的执行顺序存疑,因为会互相调用,不需要记忆 source执行脚本 source不创建子进程,bash创建子进程 普通脚本:用bash 配置文件脚本:用source 三.按功能分类
阅读更多...
30道C语言高频题整理(附答案背诵版)

30道C语言高频题整理(附答案背诵版)

1.请描述一下C语言的基本数据类型有哪些&#xff1f; C语言提供了一系列的基本数据类型&#xff0c;它们是构建更复杂数据结构的基础。这些基本数据类型主要包括&#xff1a; 整型&#xff08;Integer Types&#xff09;&#xff1a;用于存储整数值。根据存储大小和符号性&…
阅读更多...
使用Tailwind CSS和i18n的react实践

使用Tailwind CSS和i18n的react实践

首先在 src 下设置 i18n.js 文件 // src/i18n.js import i18n from i18next; import { initReactI18next } from react-i18next;import en from ./locales/en/public; import zh from ./locales/zh/public;i18n.use(initReactI18next) .init({resources: {en: { translation:…
阅读更多...
生信自学路线｜R语言的数据变量类型与对应运算

生信自学路线｜R语言的数据变量类型与对应运算

R 是一种动态类型语言&#xff0c;使用灵活&#xff0c;变量无需预先声明类型。掌握 R 的数据类型和变量机制&#xff0c;是后续进行数据处理和建模分析的基础。本章节主要介绍 R 语言中的常量、变量、基本数据类型及常用数据结构&#xff0c;并结合示例进行说明。 文章目录 一…
阅读更多...
UI前端大数据处理优化策略：提升数据处理速度与准确性

UI前端大数据处理优化策略：提升数据处理速度与准确性

hello宝子们...我们是艾斯视觉擅长ui设计、前端开发、数字孪生、大数据、三维建模、三维动画10年经验!希望我的分享能帮助到您!如需帮助可以评论关注私信我们一起探讨!致敬感谢感恩! 在数字化浪潮下&#xff0c;前端面临的数据规模正呈指数级增长 ——IDC 预测&#xff0c;2025…
阅读更多...
技术调研：时序数据库（二）

技术调研：时序数据库（二）

除了 InfluxDB、TDengine 和 TimescaleDB&#xff0c;还有其他多个主流的开源时序数据库&#xff0c;各自针对不同场景优化。以下是补充的时序数据库选型清单&#xff0c;涵盖其核心特性、适用场景及局限性&#xff1a; 1. 监控与运维场景 (1) Prometheus 核心优势&#xff1…
阅读更多...
【C++/C】十进制数转为十六进制时，如何区分正负？ 负数补码高位是1，那么一个很大的正数，高位也会出现1，会和负数搞混吗？

【C++/C】十进制数转为十六进制时，如何区分正负？ 负数补码高位是1，那么一个很大的正数，高位也会出现1，会和负数搞混吗？

文章目录 1 十进制数转为十六进制时&#xff0c;如何区分正负&#xff1f;1.1 正数处理1.2 负数处理‌1.3 关键点‌ 2 负数补码高位是1&#xff0c;那么一个很大的正数&#xff0c;高位也会出现1&#xff0c;会和负数搞混吗&#xff1f;2.1 符号位明确区分‌2.2 补码的数值范围…
阅读更多...
最新文章

Copyright @ 2022~2023