ProtoPie教程:列表长滑实现删除

金融理财 阅读(1711)

原标题:ProtoPie教程:长列表滑动删除

来水平滑动单个列表来显示支持的操作项目,这是一种比较常见的移动交互模式。在这种情况下,以任务列表页面为例,用Protopie软件实现删除左侧幻灯片,将单个任务列表的右侧幻灯片设置为完整的效果。基本原型功能

Use

Trigger中涉及的原型组件:拖动、监视、抬起、长按

响应:移动、透明、大小

实施效果

具体情况实施效果

这种情况支持在任务列表页面中的单个列表中左右滑动。向左滑动以显示删除操作。当幻灯片超过设定的距离或单击删除按钮时,删除任务,然后向上移动。右侧滑动显示设置为已完成。同样,当滑动距离超过设定距离或单击“设置为完成”按钮时,任务文本会添加删除线,以指示任务已完成。

实现思路3.1左后水平滑动的操作和范围分析

由于单个列表支持左右滑动,根据用户的滑动距离实现不同的反馈,这主要由用户滑动后列表本身的位置X来判断。

如图所示,界面的横轴分为五个不同的部分,即直接删除区、删除按钮区、操作项未显示区、显示设置为完整按钮区和直接设置为完整区域。当用户提起操作来执行时,列表锚点X落入不同的范围来执行相应的操作。

运行范围图

3.2使用组件提高效率

4.0版增加了组件功能。通过创建组件,可以将类似的动态组件快速应用到不同的场景,以避免不必要的重复工作,并提高原型生产效率。在这种情况下,任务列表页面中每个单个列表支持的触发器和响应是一致的。单个列表的组件可以在特定场景中建立和重用,以减少重复设置并提高效率。

新建组件:一种是选择特定场景页面中要创建的组件中涉及的所有层,单击顶部的“组件”或右键选择“创建组件”来创建组件。另一个可以直接点击组件管理面板中的加号来创建一个空的组件对象。

添加组件的两种方式条目

使用和编辑组件:编辑完组件后,返回场景,将编辑好的组件直接从左边拖到画板上,实现组件调用。根据不同的使用场景,可以单独调整组件,因为在这种情况下,可以编辑列表中的文本内容。

如果您需要调整组件主文件,请单击左侧的组件图标,然后双击要修改的组件进行编辑。您也可以在场景中选择一个调整后的组件,并选中“设置为主组件”以在完成后更改图层列表中组件的颜色,以便调整可以与其他组件同步。

为不同长度的文本设置

3.3删除线添加

成功后的主成分法和视觉效果差异在这种情况下,当任务列表设置为完成时,删除线将被添加到特定的文本中,删除线将具有从左向右扩展的动态效果。原型中的文本样式没有删除线设置,所以我们需要使用矩形来实现它。同时,因为我们使用列表的组件,所以具体的效果需要根据文本的长度进行调整。

这涉及到原型中的文本处理表达式长度(source:TEXT),它支持文本长度(字符数和空格数)的计算。将单个文本的长度乘以文本删除线的宽度。

文本长度函数描述

特定实现步骤1

创建一个新的原型文件,并将Figma的页面设计文档导入到原型中。选择一个单行列表,并将其相应的删除提示设置为创建组件的完成提示。使用组件复制多个列表并将其添加到滚动容器中,以实现基本的视觉效果。

Basic Visual Effect Interface

Step 2

输入组件,首先左右滑动列表以使其支持水平移动的拖放,并监视列表的X位置以确定左右移动的方向,并显示一个删除

当列表中的X≥327被直接设置为完整范围时,预设的文本掩码和删除线随着表达式长度的大小变化而增加(`任务名.文本)*9。

List Lift Trigger Setting

Step 4

当列表X的值在用户拖动期间处于直接删除或直接完成的范围内时,移动删除和选中的图标以提示操作直接生效,但是当用户拖动到其他三个范围内时,将删除和选中的图标移动到初始位置。添加列表监控中的条件和反应设置X .监控设置

步骤5

列表位置X添加点击触发器删除并选中组件中的图标,使其实现列表删除或设置点击后完成相应的响应。可以测试,到此步骤列表组件部分完成。

删除选中图标点击触发设置

步骤6

返回场景。我们会发现,遗留下来的一个问题是,当任务列表被删除时,组件中设置的列表高度会消失,这将导致列表序列中增加空行。

为了解决这个问题,我们需要为场景中的每个被叫列表组件添加一个具有高度比的监听触发器。当其高度被缩放时(当删除操作生效时),列表下的所有列表组件都将向上移动。

在这种情况下总共设置了9行列表,所以当对应于第4行的列表的高度改变时,第5-9行需要增加一个向上移动的设置,如下图所示。

组件高度比率监控设置

完成所有设置后,您可以在预览窗口中连接手机查看效果~ ~

下载案例源文件预览

本文最初由二楼的

自习室发布,每个人都是产品经理。未经允许,禁止转载

字幕。标题来自Unsplash。根据CC0协议返回搜狐查看更多“负责任的编辑”:

——