由于技术时间成本限制,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