html如何添加省市区,H5页面添加省/市/区的交互整理

由于技术时间成本限制，H5页面不能在当前页面调用起拨选控件(如下图)来选择省市区。(要调用控件，需要写接口，调用iOS和安卓的控件)

0.jpg

以下是我收集整理的两种常用处理方法：

a，当前页面内容少，在当前页面扩展

a1.jpg

a2.jpg

b，当前页面内容多，在该页面上覆盖一个新页面对地址进行选择

b1.jpg

b2.jpg

b3.jpg

b4.jpg

类似的交互再优化一步，把选择的省市用颜色做出层次区分放在上面

b5.jpg

另被问，为什么需要两条导航，这个跟Hybrid App的框架有关

Hybrid App框架.jpeg

上面第一条导航是Native ，下面第二条导航才是由H5写的H5可以控制的

点击上面的Native 导航的返回，会返回到填写表单的前一页，点关闭关掉整个H5页面

管理收货地址页面是在填写表单页面上盖了一层(不能离开表单页，否则表单上填写的未提交的内容不能保存下来)所以点Native的返回会回到填写表单的前一页

点击第二条导航，控制选择地址里的省/市/区三级的返回和关闭

另对a这种情况也思考过为什么不是下面两种方式

a2.jpg

a3.jpg

a2和a3，全部选框暴露出来，在没选择省时，市和区是不可用的。此时暴露出来增加干扰。a3横着排，在页面宽度限制下，操作不便利，选择容易出错。

一定要使用三级选择，可以考虑，出现在屏幕偏下一点地方，防止Native和H5的导航混淆

选择地区.png