Axure如何制作app底部弹框，固定在底部

产品阿强

已于 2022-04-23 06:08:22 修改

阅读量2.5k

点赞数 2

分类专栏： Axure进阶之路文章标签： axure制作app底部弹框 axure动态面板固定在底部 axure底部弹框如何固定 axure底部弹框 axure固定底部弹框

于 2021-12-01 13:42:10 首次发布

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/u014172743/article/details/121647850

版权

27 篇文章 14 订阅

订阅专栏

相信大家在日常的app原型绘制中，经常会遇到做底部弹框的功能，如果底部弹框会弹出不同的操作的话，这个时候大家就会使用动态面板进行原型制作，但是此时会存在一个问题，如果动态面板在不同的状态下高度不一样的话，就会出现下边的情况，动态面板不在底部超出了手机的底部

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5paH5ou-5rKQ6K-R,size_14,color_FFFFFF,t_70,g_se,x_16

那么如何解决这个情况呢，有两种方案解决

方案一、调整动态面板的高度

可以将动态面板的高度固定设置为所有状态状态下动态面板最高的高度，具体操作如下

1.将动态面板设置的自动调整为内容尺寸取消勾选

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5paH5ou-5rKQ6K-R,size_20,color_FFFFFF,t_70,g_se,x_16

2.将动态面板的高度固定设置为所有状态状态下动态面板最高的高度

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5paH5ou-5rKQ6K-R,size_20,color_FFFFFF,t_70,g_se,x_16

3.将所有状态下的内容全部调整为贴底部

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5paH5ou-5rKQ6K-R,size_20,color_FFFFFF,t_70,g_se,x_16

4.这种方法有一个弊端，那就是必须在绘制原型前先绘制高度最高情况下的内容，否则的话就需要在绘制完成后，修改每个状态下的内容贴底部

方案二、使用公式动态调整坐标

第二种方式是使用相关的公式进行坐标的自定义动态变化，以实现悬停在底部，具体操作如下

，首先大家要知道，元件的坐标是以左上角的坐标点为准的，所以整体的实现逻辑是，先找到app的底部的纵坐标，如图是770

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5paH5ou-5rKQ6K-R,size_20,color_FFFFFF,t_70,g_se,x_16

然后如果动态面板的高度发生变化，那么就将动态面板的纵坐标重新移动到770-动态面板的高度就可以，如下图所示

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5paH5ou-5rKQ6K-R,size_20,color_FFFFFF,t_70,g_se,x_16

添加局部变量为当前动态面板

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5paH5ou-5rKQ6K-R,size_20,color_FFFFFF,t_70,g_se,x_16

点击插入变量或函数

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5paH5ou-5rKQ6K-R,size_20,color_FFFFFF,t_70,g_se,x_16

书写公式

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5paH5ou-5rKQ6K-R,size_20,color_FFFFFF,t_70,g_se,x_16 点击确定，将需要刷新位置的地方全部都复制该语句即可

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5paH5ou-5rKQ6K-R,size_20,color_FFFFFF,t_70,g_se,x_16

更多精彩分享内容请访问我的官网：文拾沐译产品经理导航

关注

专栏目录