微信小程序开发picker有哪些类型？了解这几种就够了

发布日期： 2025-12-06 阅读量： 作者： admin

我最近在搞微信小程序，有个需求是让用户选东西，比如选日期或者城市。我寻思这个功能不就是用picker吗？小程序里picker类型应该不多，简单几下搞定。

开始捣鼓picker

我先打开微信开发者工具，启动项目，心想着直接写代码试试。我打算在小程序里加个页面，展示一个选择器。

结果一上来，我随便写了个基础代码：<picker mode="selector"></picker>，选了几个水果名字。

跑起来一看，页面弹出个列表：苹果、香蕉、橘子。这就是普通选择器，模式叫selector，超简单，选项随便填。

项目里要用户选生日，我又回去看文档，发现还有个日期选择器，模式是date。

我改成：<picker mode="date" start="2000-01-01" end="2025-01-01"></picker>。

一测试，日期滚轮出来了，但格式老是出错。我试了好几次，发现start和end得用YYYY-MM-DD，要不就报错，我骂了句坑爹。

加了value值绑数据，总算行了，用户能滚到正确年份。

有个功能是预约时间，我接着试时间选择器，模式叫time。

代码是：<picker mode="time" value="12:00"></picker>。

跑起来，选小时分钟，但初始值设不对，半天搞不定。我挠头，干脆不设了，用默认值。

用户反馈说太麻烦，我就只用小时选择，简单粗暴。

用户说要选省份城市，我就找区域选择器，模式是region。

写：<picker mode="region"></picker>，结果弹出了省市联动菜单。

但数据是静态的，不能自定义，我急眼了，以为能改。文档说只能按系统内数据，没法加额外选项。

后来放弃，改用普通选择器模拟多列，写了两层列表应付过去。

我以为就这些，结果一看文档，还有多列选择器和multiSelector啥的。

我试multiSelector，代码一堆，联动逻辑乱套，改了又改，搞出一堆bug。

累了，心说没必要折腾，项目又不是造火箭。

实际开发中，我学乖了：了解这几种就够了，够应付99%需求。

其他花里胡哨的类型，比如multiSelector，我全丢一边，太麻烦不值当。

现在项目里picker跑得顺溜，用户没抱怨，我省心多了。