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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,826评论 25 709
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,305评论 4 61
  • 强大记忆是个好东西,你也可以拥有。 是的,你需要相信你可以做一个拥有强大记忆的人。 研究表明,人类对大脑的使用只占...
    迢迢和阅读 187评论 0 0
  • 说了减肥却还是做不到(唱出来了) 连绵几天之后这个雨量真是刷新了我对秋雨的认识,也算淅淅沥沥,就是不停,过会儿还下...
    亢龙有悔阅读 438评论 0 1
  • 醉过才知酒浓,爱过才知情重。 愿每一个相信爱情的人,都能好好把握自己的幸福, 不要让你爱的人难过,也不要让爱你的人...
    文字里的拾荒者阅读 858评论 0 3