内嵌框架实现APP原型无刷新跳转

发布日期:2018-10-14    浏览量:16831

加入VIP社群,可终身免费下载本案例原型,及本站全部VIP原型,新增的原型不再收费。 查看VIP原型

本文分享的是:在Axure软件中,使用“内嵌框架”搭建APP原型,实现页面的无刷新跳转。

原型预览地址:http://www.vip.pmyuanxing.com/文章/APP内嵌框架/index.html

一、在index页面拖入内嵌框架。

新建index页面,在页面中拖入1个内嵌框架(命名:Frame,宽:375px,高:667px),如下图。然后设置手机壳为index页面背景图。内嵌框架与手机壳和页面的居中设置,请阅读上一篇文章:《APP原型与页面左右/垂直居中对齐》。

二、设置内嵌框架中默认显示的页面

新建APP原型页面,例如本案例中的:商品分类页、商品列表页、商品详情页。然后在index页面中双击内嵌框架,选中商品分类页,点击确定按钮,将商品分类页设置为,内嵌框架中默认显示的页面,如下图。或者单击选中内嵌框架,在右侧【属性】中单击【选中框架目标】进行设置,设置好后,在浏览器中预览原型,index页面的内嵌框架会默认显示商品分类页。

三、给商品分类添加链接事件

找到商品分类页,给各个分类,添加链接事件:鼠标单击时,在当前窗口跳转至商品列表页。事件添加好后,在浏览器中预览原型:index页面的内嵌框架中,会默认显示商品分类页,单击某个分类时,会在内嵌框架中跳转至商品列表页。页面链接的跳转会在内嵌框架中完成,并不会刷新index页面。

综上所述:

  • 在商品列表页,给各个商品添加链接事件:鼠标单击时,在当前窗口跳转至商品详情页。
  • 在商品详情页,给左上角返回箭头添加链接事件:鼠标单击时,在当前窗口跳转至商品列表页。
  • 在商品列表页,给左上角返回箭头添加链接事件:鼠标单击时,在当前窗口跳转至商品分类页。

做好以上链接后预览index页面,便可以实现APP页面的无刷新跳转了。
以此类推,如果有几十上百甚至更多页面时。只要依照此方法,便可实现全部APP页面的无刷新跳转。

原型预览地址:http://www.vip.pmyuanxing.com/文章/APP内嵌框架/index.html

Axure产品原型

Axure产品原型官网(pmyuanxing.com)—— 专注于提升Axure产品原型的效率与体验!
为产品经理、交互设计师、UI设计师提供:Axure原型模板下载、APP原型下载、电商原型下载、APP元件库等整站原型的下载,以及Axuer教程和Axure视频教程的服务。
欢迎加入VIP社群,与小伙伴一起学习交流,共同成长!

合作伙伴

  • 微信公众号
  • QQ交流群

Axure产品原型:专注于提升Axure产品原型的效率与体验! ©Axure产品原型,版权所有 侵权必究  粤ICP备18031656号-1