Axure 列表左右滑動交互-刪除、置頂

Axure 列表左右滑動交互

  • 左滑:刪除、標記
  • 右滑:置頂、回覆

拖一個動態面板,命名爲【滑動面板】,添加三個狀態,並分別命名爲:正常狀態、向左狀態、向右狀態
image

添加元件

正常狀態

image

向左狀態

  1. 將【正常狀態】裏的元件複製到 【向左狀態】 中,並進行組合,方便調整
  2. 並將組合元件向左移動,右邊留出兩個按鈕空間
  3. 在組合元件右側添加兩個按鈕,分別爲:【標爲已讀】、【刪除】

image

向右狀態

將【向左狀態】的組合複製到【向右狀態】中,參考上面方法,添加的元件,並增加【置頂】、【回覆】兩矩形
image

交互事件

給動態面版添加兩個交互【向左拖動】、【向右拖動】
向左拖動分兩種情況

  • 正常狀態,需要向左滑動,對該條數據進行刪除等
  • 已經被滑到右邊了,需要向左滑動到正常狀態。

向右拖動分兩種情況:

  • 正常狀態,需要向右滑動,進行回覆、置頂
  • 已經被滑到左邊了,需要向右滑動,恢復正常狀態。

詳細事件如下:
image

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章