中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

Axure版本：8.0

制作步驟為：

添加中繼器–>添加動態面板–>添加選項菜單–>綁定事件

1.添加中繼器

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

此時，預覽效果如下：

2.添加動態面板

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

3.添加選項菜單

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

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

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

4.添加事件

該步驟是最核心的環節，整體左滑效果都是在這個環節中實現的。

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

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

2）此時預覽原型圖，左滑列表已經可以看到動態面板左滑的效果，如下：

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

4）再次預覽，已經出現期望的效果，如下圖：

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

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

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

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

5.進階內容

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

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

即：

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

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

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

本文由 @互聯科技 原創發布于人人都是產品經理。未經許可，禁止轉載。