原生小程序省市区选择页面

最新推荐文章于 2024-07-16 22:51:31 发布

90年的罐头�

最新推荐文章于 2024-07-16 22:51:31 发布

阅读量2.3k

点赞数

分类专栏：前端 js html 小程序文章标签：小程序

本文链接：https://blog.csdn.net/weixin_43978604/article/details/94400973

版权

本文介绍了如何在小程序中创建一个省市区选择页面，通过利用region picker组件并以页面形式展示。首先，从网络获取全国省市区数据，然后对数据进行汉字转拼音处理并按字母归类。用户点击选择时，对应的省市区会显示在顶部，同时提供省份、城市、区县的切换功能。文章还展示了wxml结构和js逻辑，并提到了可以使用picker-view组件实现三级联动以优化移动端操作体验。

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

写一个小程序省市区选择页面

小程序里已经封装好了 region picker 这里以页面形式实现

效果图（界面部分css 未详细写仅展示基本结构）

思路

1 百度获取到全国省市区数据
2 对省份数据以字母形式归类（此处用到汉字转拼音 pinying.js , 并把 B 与A 对换位置北京市第一位置）
3 点击相应省市区选择展示在顶部位置，点击顶部相应省市区展示相应列表
4 扩展热门城市功能未写

wxml 结构

`

<view class="region-container">
<view class="region flex-r-s">
    <text wx:for='{
  {regionData}}' 
          wx:for-index='key' 
          wx:for-item='value' 
          wx:key='{
  {key}}'