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

滑動選擇器算是APP原型設計中非常常見的一個功能，但多數人只是做了靜態效果，少有做交互動效的。這篇文章，作者就分享了如何設計動效，供大家參考。

這期內容，我們來探討Axure中二級滑動選擇器設計與交互技巧。

二級滑動選擇器

創建滑動選擇器所需的元件

1.在元件庫中拖出兩個中繼器元件。

2.選中中繼器元件，樣式窗格中分別命名，“左邊，右邊”

3.選中“左邊”一級選擇中繼器元件，實現上下拖動的交互，中繼器沒有拖拽交互，只有動態面板才有拖拽交互，所以需要右鍵將中繼器轉為動態面板。

選中（“左邊”一級選擇器）動態面板，在交互窗格中新建交互，拖動時，移動，當前，跟隨垂直拖動。

預覽效果，點擊預覽，在預覽頁面，選中“左邊”一級選擇中繼器元件可以實現拖動效果。

限制動態面板的顯示區域，讓它只顯示中間的選項

1.選中動態面板，右鍵，將動態面板再轉為動態面板，在概要窗格選中第一層動態面板命名為左邊，第二層動態面板命名為向左移動。

2.選中第一層“左邊”動態面板，在樣式窗格將高度設為30，只顯示一行，將填充顏色設置為灰色（#F2F2F2）

3.選中第一層“左邊”動態面板，雙擊到中繼器內部矩形，將填充色設置為透明，線寬設置為 0。

預覽效果，點擊預覽，在預覽頁面，“左邊”一級選擇中繼器元件就實現了只顯示一行，并且有拖動的效果。

給拖動效果添加邊界

1.在第二層（向左移動）動態面板交互窗格，拖動時，移動交互中點擊更多選項，添加界限，頂部 大于等于、底部 小于等于

2.選中頂部 大于等于 條件，插入變量或函數 [[30 – This.height]] ，底部 小于等于 條件，插入變量或函數 [[This.height]] 。

看一下 完整交互。

預覽效果，點擊預覽，在預覽頁面，“左邊”一級選擇中繼器元件在拖動時頂部和底部都增加了邊界，拖動到1時，無法繼續向頂部拖動，拖動到3時，無法繼續向底部拖動。

選中“左邊”一級選擇中繼器元件，在樣式窗格中添加兩行，效果也是一樣的。

判斷選擇值，確認所選項

1.在第二層動態面板交互窗格中新建拖動結束時，設置變量值，選擇變量，添加變量 leftindex

2.設置leftindex變量值 值 為 插入變量或函數[[(-This.y/30).toFixed(0)+1]]

看一下完整交互。

3.修正選擇，添加動作，移動 當前 到達 y軸插入變量或函數 [[-(leftindex-1)*30]] 線性 500毫秒

預覽效果，點擊預覽，在預覽頁面，“左邊”一級選擇中繼器元件在拖動到選項三分之一時會修正選項。

根據一級選擇器的選擇結果篩選二級選擇器的數據

1.選中二級選擇器（右邊），雙擊中繼器元件，在樣式窗格 數據表中增加linkleft 列，并補充數據。

2.添加關聯性，選中一級選擇器，在概要窗格點擊向左移動動態面板交互窗格，添加動作，等待 500毫秒，添加篩選 右邊

3.添加動作 更新行 左邊 插入變量或函數 [[TargetItem.index == leftindex]]

4.在概要窗格中 選中“左邊”中繼器元件，樣式窗格 數據 添加列 select 列

5.回到 更新行 +選擇列 select 值 1 ，并將更新行交互移動到 設置變量值下

6.在概要窗格中 選中 “左邊”中繼器元件，在交互窗格中添加動作 設置變量值，選擇變量，添加全局變量 leftselect

7.選擇變量 leftselect 值 插入變量或函數 [[Item.Column0]]

8.添加判斷條件 ，啟用情形判斷

情形1：如果”[[ltem.index]]” ==”[[leftindex]]”

情形2：否則 如果”真” 復制粘貼 設置文本 交互 。

9.在概要窗格選中 “向左移動” 動態面板，回到交互窗格 添加篩選交互 規則 插入變量或函數 [[TargetItem.linkeft == leftselect]]

預覽效果，點擊預覽，在預覽頁面，拖動“左邊”一級選擇中元件右邊選擇器會同步篩選結果。

右邊選擇器移動效果

1.選中右邊選擇器中繼器元件，右鍵轉為動態面板，在交互窗格 添加 拖動時，移動 當前 跟隨垂直拖動，跟左側是一樣的。

2.新建交互 拖動結束時 移動 當前 到達

3.選中當前元件，右鍵，轉為動態面板 ，復制 “向左移動”動態面板 設置變量值、移動交互粘貼到第二層動態面板

4.選中 設置變量值 交互 目標 添加變量 rightindex

將變量值 目標 改為 rightindex 其他不變

5.選中 移動 交互 將y軸全局變量 [[-(leftindex-1)*30]] 替換為 [[-(rightindex-1)*30]]

6.添加拖動邊界

選中 拖動時交互，點擊更多選項 添加邊界，頂部 大于等于 插入變量或函數 [[30-This.height]]， 底部 小于等于 插入變量或函數 [[This.height]]

選中右邊第一層動態面板，在樣式窗格中，設置高度為 30，設置填充顏色為灰色 （#F2F2F2）

選中“右邊”動態面板，雙擊進入中繼器矩形，填充顏色設置為透明，線寬設為0。

預覽效果，點擊預覽，在預覽頁面，拖動“左邊”一級選擇中元件右邊選擇器顯示效果和左邊同步。

添加默認選擇

1.在項目列表中 選擇 全局變量 選中leftindex 設置默認值為 1

2.選中右邊選擇器第一層動態面板，在交互窗格命名為 右邊，第二層動態面板命名為向右移動。

3.在概要窗格中 選中“向右移動”新建交互 載入時 添加篩選 右邊 規則 插入變量或函數 [[TargetItem.linkleft == leftselect]]

預覽效果，點擊預覽，在預覽頁面，拖動“左邊”一級選擇中元件，右邊選擇器只顯示左邊選項對應結果。

1.在中繼器 樣式 窗格 數據表中 可以修改一級選擇器和二級選擇器的內容，*二級選擇器的內容需要和一級選擇器的內容有關聯。

2.在概要窗格中 選中 “向左移動” 在交互窗格中 添加 移動 向右右邊 到達 （0,0）交互 。

預覽效果，點擊預覽，在預覽頁面，拖動“左邊”一級選擇中元件，右邊選擇器會同步顯示對應結果。

預覽地址：https://hfez21.axshare.com