各种系统中行政区域选择的场景不少，我们也有不少这样的场景。本想使用第三方的组件，但是大多有些小问题，不能满足需要。后面使用picker的mulitSelector模式写了一个，发现这种列模式的体验并好，最后仿京东模式自定义了一个。

一、造轮子的原因

1.1 数据要自定义

微信官方的picker的region模式使用的是标准的国家行政区域数据，而我们的场景有一些自设的区域要加入；也不可以自定久选择级数，只能选到县/区级。

1.2 picker的兼容性并不好。

uni-app的picker组件，在小程序模式是使用各自的picker，H5则是uni-app自的picker组件。所以在各平台中还是有差异的，在我们测试中微信的picker的mulitSelector模式，在列级联滑动中如果出现两次列数组值length不一致时，后绑定的选定索引时会无效，会自动致为0，且后续触发的change事件则仍是绑定索引，而在H5时不会。

1.3 picker是不适合异步加载数据

级联就是要简便的控制后续列的变化，如1.2所示，绑定索引bug。而如果数据是异步加载，则更难于控制加载状态，特别是滑动过快网络不佳时，很容易出现数据混乱。

1.4 picker作级联，不如京东级联模式的体验好效率高。

如图所示

二、上代码

使用的了tui-drawer 、tui-loadmore等tui-xxx为uni-app第三方组件，具本使用参考官方文档，或使用别的组件替代。regionApi为行政区域节点异步加载封装，可根自己数据自行封装。

1
7
8
46
47
352
353

Region Picker

行政区化节点数据，来源国家统计局，到县区级。

https://files.cnblogs.com/files/blogs/677104/cn_regions.json

最终效果