由于技术时间成本限制，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
网友评论