該效果是模仿iOS微信界面中，左滑列表時顯示菜單項的效果，使用的都是Axure中常用的組件，原理是通過控制動態(tài)面板的坐標來移動面板并顯示菜單。本文僅適用于具有一定Axure使用經(jīng)驗的用戶閱讀。

Axure版本：8.0

制作步驟為：

添加中繼器–>添加動態(tài)面板–>添加選項菜單–>綁定事件

1.添加中繼器

1）在頁面中添加中繼器控件，并設置中繼器綁定數(shù)據(jù)，添加后默認效果如下圖，如果不熟悉中繼器的使用方法，請參考我的其他文章《Repeater（中繼器）控件的用法》；

此時，預覽效果如下：

2.添加動態(tài)面板

1）打開中繼器編輯界面，全選所有的組件，點擊右鍵將其轉(zhuǎn)換為動態(tài)面板，并命名為panelList，這樣轉(zhuǎn)換的目的是動態(tài)面板可以響應左滑的動作，如下圖所示：

3.添加選項菜單

下面添加選項菜單，以下僅以添加一個刪除菜單為例進行說明。

1）在中繼器編輯窗口中，添加一個矩形組件并設置好樣式，效果如下：

2）右鍵點擊該矩形組件并將其轉(zhuǎn)換為一個動態(tài)面板，命名為panelOption，并將面板設置為隱藏，如下：

4.添加事件

該步驟是最核心的環(huán)節(jié)，整體左滑效果都是在這個環(huán)節(jié)中實現(xiàn)的。

1）在中繼器編輯窗口中，為panelList添加左滑事件，滑動時讓panelList的x坐標相對于當前位置向左移動64px，效果如下：

注意：x坐標向左移動的距離需要與panelOption的寬度相等。

2）此時預覽原型圖，左滑列表已經(jīng)可以看到動態(tài)面板左滑的效果，如下：

3）繼續(xù)為panelList面板的左滑事件添加動作，動畫顯示panelOption，如下：

4）再次預覽，已經(jīng)出現(xiàn)期望的效果，如下圖：

5）至此，左滑顯示菜單的功能以實現(xiàn)，但菜單無法隱藏，下面還需要添加右滑隱藏菜單的功能；

6）為panelList添加右滑事件，當向右滑動結(jié)束時panelList的x坐標相對于當前位置向右移動64px，效果如下：

注意：此時的當前位置是panelList已經(jīng)左滑過去的位置，即位置（-64,0）。

7）再次預覽，右滑就可以隱藏菜單了。

5.進階內(nèi)容

細心的讀者可能會發(fā)現(xiàn)，按照上述方法制作的滑動效果是有瑕疵的，即如果連續(xù)左滑或者連續(xù)右滑，panelList會一直向左或向右移動，這顯然跟實際的效果是有偏差的。以下內(nèi)容將介紹如何避免這種情況發(fā)生，當然如果不追求完美的小伙伴可以不用考慮這個章節(jié)的內(nèi)容哦。

1）只要在面板滑動時添加一個條件限制左滑或右滑就可以了，方法如下：

即：

在panelList的“向左滑動結(jié)束時”添加條件，設置只有當面板的x坐標等于0時才可以向左滑動；

同理，在panelList的“向右滑動結(jié)束時”添加條件，設置只有當面板的x坐標不等于0時才可以向右滑動。

2）上述條件設置完成后，再次預覽，發(fā)現(xiàn)就只能向左或向右滑動一次啦。

本文由 @互聯(lián)科技 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。