APP原型框架 | 内嵌框架实现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原型