需用动态面板禁用滚动条并设多状态,叠加透明下拉区检测Y轴位移,超60px触发加载中状态与1200ms延迟,再追加数据、还原滚动位置、重置区域坐标,并添加回弹、缩放及旋转反馈。

如果您在Axure中设计移动端长列表时需要实现下拉加载更多功能,并同步隐藏默认滚动条、模拟真实拖拽交互效果,则需结合动态面板状态切换、拖动事件、条件判断与载入动作协同完成。以下是具体实现步骤:
一、设置动态面板基础结构与滚动属性
动态面板是实现长列表滚动与状态切换的核心容器,需关闭其内置滚动条以启用自定义拖拽逻辑,并通过多状态管理“加载中”“加载完成”等视觉反馈。
1、拖入一个动态面板组件至画布,命名为“listPanel”,宽度设为375px(标准iPhone宽度),高度设为600px(可适配视口高度)。
2、双击进入动态面板编辑模式,在“样式”面板中勾选“禁用滚动条”,确保不显示浏览器默认滚动条。
3、在动态面板内添加两个状态:“state1_初始列表”和“state2_加载中”,其中state1放置初始10条列表项,state2放置加载提示图标与文字。
二、配置下拉区域与Y轴位移检测
需在动态面板上方叠加一个透明的“下拉触发区”,用于捕获用户手指下拉动作起始点,并通过拖动结束时的Y轴位移差判断是否满足加载阈值。
1、在listPanel正上方绘制一个高80px、宽375px的矩形,填充色设为透明,命名为“pullArea”,置于顶层。
2、为pullArea添加“拖动时”交互:设置变量[[DragStartY]] = [[This.y]],记录拖动起始Y坐标。
3、为pullArea添加“拖动结束”交互:计算位移差[[deltaY]] = [[This.y]] - [[DragStartY]],并设置条件:若[[deltaY]] > 60,则载入state2并触发加载动作。
三、实现加载中状态切换与数据追加逻辑
当满足下拉阈值后,需即时切换动态面板至加载中状态,并在后台模拟数据加载延迟,完成后恢复初始状态并追加新列表项。
1、在pullArea的“拖动结束”交互中,添加动作:设置listPanel状态为state2。
2、添加“等待”动作,持续时间设为1200ms,模拟接口响应延迟。
3、等待结束后,添加动作:设置listPanel状态为state1,并在state1中已预留的列表容器底部动态插入新增的5条列表项元件(可通过“载入页面”或“设置文本”配合中继器数据更新)。
四、还原滚动位置并重置触发区
加载完成后若不恢复滚动位置,用户将停留在顶部,导致体验断裂;同时需重置pullArea的Y坐标,避免连续触发。
1、在等待动作结束后、状态切换前,添加“移动”动作:将listPanel的y坐标设为[[listPanel.y]] + 80,补偿下拉位移量。
2、添加动作:将pullArea的y坐标设为0,使其回归原始位置。
3、添加动作:设置变量[[DragStartY]] = 0,清除上一次拖动记录。
五、绑定松手回弹与边界阻尼效果
为增强移动端真实感,需在未达加载阈值时实现松手自动回弹,并对过度拖拽施加视觉阻尼(如缩放提示图标)。
1、在pullArea的“拖动结束”交互中,增加分支条件:若[[deltaY]] 0,则执行“移动”动作,将pullArea.y设为0,实现平滑回弹。
2、为pullArea添加“拖动时”子条件:若[[deltaY]] > 0,则设置其宽度和高度按比例缩放,例如scaleX = 1 + [[deltaY]] * 0.01,scaleY = scaleX,形成拉伸反馈。
3、在state2中添加一个旋转动画图标,设置其“旋转”属性随[[deltaY]]增大而加速,最大旋转速度限制为360度/秒。

















