uni-app中无法直接用picker实现真自定义样式，因其为原生控件，css无效；可行方案是使用uni-datetime-picker的custom-item插槽模拟，或基于scroll-view手写但需规避滚动、日期计算和样式对齐等坑。
uni-app里无法直接用picker实现真自定义样式？
没错。picker组件在各端（尤其是iOS和微信小程序）是原生控件，样式完全由系统控制，class、style、伪类统统无效。你写的CSS对它没反应，不是写错了，是根本不可覆盖。
所以「自定义风格」的唯一可行路径是：不用picker，改用纯Vue组件模拟选择逻辑 —— 即「自定义时间选择器」。
推荐方案：用uni-datetime-picker + 自定义slot
官方uni-ui库里的uni-datetime-picker支持custom-item插槽，能替换年/月/日/时/分的每一列渲染内容，这是目前最轻量又兼容多端的方式。
关键点：
-
mode设为date、time或datetime，决定显示范围 - 启用
custom-item后，每列数据会传入item（当前值）、index（列序号）、columnIndex（列类型：0=年,1=月,2=日…） - 你返回任意
<view></view>结构，比如加图标、换字体、加背景色，都生效 - 注意：iOS下滚动惯性大，自定义内容不宜过高（建议单行+padding，总高≤44px），否则易卡顿或错位
<uni-datetime-picker v-model="dateValue" mode="date"><template item columnindex><view class="picker-item" :class="{ 'active': item === selectedDate[columnIndex] }"><text>{{ item }}</text></view></template></uni-datetime-picker>
完全手写滚动选择器？小心这3个坑
如果uni-datetime-picker仍不够自由（比如要3D翻转、非等高列、联动城市级联），就得基于scroll-view手写。但以下问题高频踩雷：
-
scroll-view在H5端默认启用scroll-y，但在小程序端必须显式设置scroll-y="true"且父容器有固定height，否则不滚动 - 手动计算滚动位置时，别用
scrollTop直接赋值——不同端单位不一致（H5是px，小程序是px但受dpr影响），应统一用scroll-into-view或scrollToAPI - 日期逻辑别自己算闰年/大小月：
new Date(2024, 1, 30)会自动转成2024-02-29，用Date对象生成选项更稳
样式细节：怎么让数字居中又对齐？
自定义列里数字上下偏移、左右不对齐，本质是行高与容器高度未匹配 + 字体基线干扰。最简解法：
- 给包裹元素设
display: flex; align-items: center; justify-content: center; - 禁用
line-height，改用padding控制垂直空间（避免字体基线浮动） - 数字用
<text></text>而非<view></view>包裹，<text></text>在小程序中对齐更可控 - 若需等宽数字（如01、02），统一用
String(item).padStart(2, '0')
复杂点在于iOS Safari对flex在scroll-view子项中的兼容性差，有时需加min-height: 1em兜底。
