一、底部弹框的思路及步骤解析

原型屏幕尺寸：375*667px（iphone6/iphone6s/iphone7）

原型在线地址： http://u.pmdaniu.com/mql3

1、在Axure中，拖入一个动态面板（命名：Box2，尺寸：375，667），以下称Box2，默认隐藏；

2、在Box2中，设置一个黑色背景，透明度40%（命名：Background_Box2，尺寸：375，667），默认隐藏；

3、在Box2中，再拖入一个动态面板，以下称底部弹框（命名：Main_Box2，尺寸：375，高度自动调整为内容尺寸），默认隐藏；

4、在Axure中，拖入一个按钮（或热区），以下称弹框按钮，命名及尺寸根据情况自行编辑；

5、单击弹框按钮时，设置事件：

• 移动Box2到达（坐标：0，0），这样设置后，该动态面板就可以放在页面的任意位置，不会遮挡住其他元件的编辑，
• 显示Box2，动画：无，置于顶层，该事件必须在以下2个事件的前面；
• 显示黑色背景，动画：逐渐，时间：500毫秒；
• 显示底部弹框，动画：向上滑动，时间：500毫秒；

6、单击黑色背景时，设置事件：

• 隐藏底部弹框，动画：向下滑动；
• 隐藏黑色背景，动画：逐渐；
• 等待500毫秒，500毫秒为动画默认播放时间；
• 隐藏Box2，动画：无，该事件必须在以上3个事件的后面，因为要等待动画播放完毕再隐藏。

7、双击进入底部弹框，编辑好弹框选项及取消按钮，选项的数量、文字内容根据情况自行编辑；

8、单击选项时，设置事件：

• 单击选项时，如果不需要跳转至其他页面，则直接触发“黑色背景单击时事件”即可，因为该事件与“单击黑色背景时的事件”一致；
• 单击选项时，如果需要跳转至其他页面，则设置单击时的链接跳转即可。

9、单击取消按钮时，设置事件：

• 单击取消按钮时，直接触发“黑色背景单击时事件”即可，因为该事件与“单击黑色背景时的事件”一致。

原型在线地址： http://u.pmdaniu.com/mql3

二、高级进阶：运用中继器和全局变量，实现弹框选项的自由编辑及增减

1、单击弹框按钮时设置全局变量【box_id】的值，并触发“中继器载入时事件”；

2、中继器载入时，设置添加筛选事件：中继器中“Item.box_id”列的值等于全局变量“box_id”的值[[Item.box_id==box_id]]；

3、第一行上面为圆角，中间几行为直角，最后一行下面为圆角，如果第一行是标题则高度和字体样式都与其他行不一样，如果只有一行则上面下面都是圆角，一共5种样式，需要用动态面板做5种不同的样式，然后通过中继器的函数和字段，来判断每行调用哪种样式，此处需要设置的事件截图如下（如有更好方法，欢迎请加q群235415403交流沟通）：

原型在线地址： http://u.pmdaniu.com/mql3

关注“亮亮原型”订阅号，发送“6”获取RP源文件下载地址。

原型屏幕尺寸：375*667px（iphone6/iphone6s/iphone7）

注： 本文由 @亮亮 原创发布于产品壹佰，未经许可，禁止转载。