0
点赞
收藏
分享

微信扫一扫

Axure 列表左右滑动交互-删除、置顶

Axure 列表左右滑动交互

  • 左滑:删除、标记
  • 右滑:置顶、回复

拖一个动态面板,命名为【滑动面板】,添加三个状态,并分别命名为:正常状态、向左状态、向右状态

Axure 列表左右滑动交互-删除、置顶_置顶

添加元件

正常状态

Axure 列表左右滑动交互-删除、置顶_数据_02

向左状态

  1. 将【正常状态】里的元件复制到 【向左状态】 中,并进行组合,方便调整
  2. 并将组合元件向左移动,右边留出两个按钮空间
  3. 在组合元件右侧添加两个按钮,分别为:【标为已读】、【删除】

Axure 列表左右滑动交互-删除、置顶_置顶_03

向右状态

将【向左状态】的组合复制到【向右状态】中,参考上面方法,添加的元件,并增加【置顶】、【回复】两矩形

Axure 列表左右滑动交互-删除、置顶_置顶_04

交互事件

给动态面版添加两个交互【向左拖动】、【向右拖动】
向左拖动分两种情况

  • 正常状态,需要向左滑动,对该条数据进行删除等
  • 已经被滑到右边了,需要向左滑动到正常状态。

向右拖动分两种情况:

  • 正常状态,需要向右滑动,进行回复、置顶
  • 已经被滑到左边了,需要向右滑动,恢复正常状态。

详细事件如下:

Axure 列表左右滑动交互-删除、置顶_Axure_05

Axure 列表左右滑动交互-删除、置顶_数据_06



举报

相关推荐

0 条评论