微信小程序自定义yPicker组件分析及省市区三级联动实现

最新推荐文章于 2024-08-13 16:20:34 发布

winty~~

最新推荐文章于 2024-08-13 16:20:34 发布

阅读量1k

点赞数

文章标签：定位 js html nagios c++11

本文链接：https://blog.csdn.net/LuckyWinty/article/details/109506361

版权

本文介绍了微信小程序中自定义日期-时间组件的实现，探讨了如何使用多列picker模拟多列选择器，以及如何通过yPicker组件实现省市区三级联动。作者分享了完整项目链接和城市列表文件，提供了详细的实现策略和代码示例。

摘要由CSDN通过智能技术生成

本文为作者行舟客投稿，

原文地址：https://blog.csdn.net/qq_43624878/article/details/109284502?utm_source=app

完整项目地址：https://github.com/1314mxc/yunUI

点击阅读原文即可打开github，欢迎点赞！

背景

自从上一篇文章：微信小程序自定义日历组件及flex布局最后一行对齐问题分析出来以后，有人私聊我说能不能从头分析一下我开源的自定义组件？一直没时间。这不，最近项目中有个需求是 省市区三级联动 ，我就顺便从组件库中的第一个「扩展日期-时间（点此直接至GitHub）」picker组件开始说一下这两个功能的实现。

简单说一下“自定义日期-时间组件”

它的背景是项目的第一版当时发现微信小程序内置的日期组件：picker只能精确到某一天（年月日），但是我们很多时候需要年月日时分甚至是年月日时分秒（如结束时间/发布时间）。

笔者仔细翻阅了官方文档和许多博主文章发现提出了各种各样的解决方案（但很遗憾没发现有博主详细公开代码），但是对于这样一个其实并不需要“联动”、列数也不固定的功能，用多列picker模拟多列选择器 即可。

<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{
   {multiIndex}}" range="{
   {multiArray}}">
 <input value='{
   {time}}' readonly="" disabled="true" placeholder='{
   {defaulttext}}' />
</picker>

其中 readonly="" disabled="true" 的作用是使“input聚焦时软键盘不弹出”（两个属性作用一样，都写是因为Android和iOS的兼容性问题）。