滑動(dòng)選擇器算是APP原型設(shè)計(jì)中非常常見(jiàn)的一個(gè)功能，但多數(shù)人只是做了靜態(tài)效果，少有做交互動(dòng)效的。這篇文章，作者就分享了如何設(shè)計(jì)動(dòng)效，供大家參考。

這期內(nèi)容，我們來(lái)探討Axure中二級(jí)滑動(dòng)選擇器設(shè)計(jì)與交互技巧。

二級(jí)滑動(dòng)選擇器

創(chuàng)建滑動(dòng)選擇器所需的元件

1.在元件庫(kù)中拖出兩個(gè)中繼器元件。

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

3.選中“左邊”一級(jí)選擇中繼器元件，實(shí)現(xiàn)上下拖動(dòng)的交互，中繼器沒(méi)有拖拽交互，只有動(dòng)態(tài)面板才有拖拽交互，所以需要右鍵將中繼器轉(zhuǎn)為動(dòng)態(tài)面板。

選中（“左邊”一級(jí)選擇器）動(dòng)態(tài)面板，在交互窗格中新建交互，拖動(dòng)時(shí)，移動(dòng)，當(dāng)前，跟隨垂直拖動(dòng)。

預(yù)覽效果，點(diǎn)擊預(yù)覽，在預(yù)覽頁(yè)面，選中“左邊”一級(jí)選擇中繼器元件可以實(shí)現(xiàn)拖動(dòng)效果。

限制動(dòng)態(tài)面板的顯示區(qū)域，讓它只顯示中間的選項(xiàng)

1.選中動(dòng)態(tài)面板，右鍵，將動(dòng)態(tài)面板再轉(zhuǎn)為動(dòng)態(tài)面板，在概要窗格選中第一層動(dòng)態(tài)面板命名為左邊，第二層動(dòng)態(tài)面板命名為向左移動(dòng)。

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

3.選中第一層“左邊”動(dòng)態(tài)面板，雙擊到中繼器內(nèi)部矩形，將填充色設(shè)置為透明，線寬設(shè)置為 0。

預(yù)覽效果，點(diǎn)擊預(yù)覽，在預(yù)覽頁(yè)面，“左邊”一級(jí)選擇中繼器元件就實(shí)現(xiàn)了只顯示一行，并且有拖動(dòng)的效果。

給拖動(dòng)效果添加邊界

1.在第二層（向左移動(dòng)）動(dòng)態(tài)面板交互窗格，拖動(dòng)時(shí)，移動(dòng)交互中點(diǎn)擊更多選項(xiàng)，添加界限，頂部 大于等于、底部 小于等于

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

看一下 完整交互。

預(yù)覽效果，點(diǎn)擊預(yù)覽，在預(yù)覽頁(yè)面，“左邊”一級(jí)選擇中繼器元件在拖動(dòng)時(shí)頂部和底部都增加了邊界，拖動(dòng)到1時(shí)，無(wú)法繼續(xù)向頂部拖動(dòng)，拖動(dòng)到3時(shí)，無(wú)法繼續(xù)向底部拖動(dòng)。

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

判斷選擇值，確認(rèn)所選項(xiàng)

1.在第二層動(dòng)態(tài)面板交互窗格中新建拖動(dòng)結(jié)束時(shí)，設(shè)置變量值，選擇變量，添加變量 leftindex

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

看一下完整交互。

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

預(yù)覽效果，點(diǎn)擊預(yù)覽，在預(yù)覽頁(yè)面，“左邊”一級(jí)選擇中繼器元件在拖動(dòng)到選項(xiàng)三分之一時(shí)會(huì)修正選項(xiàng)。

根據(jù)一級(jí)選擇器的選擇結(jié)果篩選二級(jí)選擇器的數(shù)據(jù)

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

2.添加關(guān)聯(lián)性，選中一級(jí)選擇器，在概要窗格點(diǎn)擊向左移動(dòng)動(dòng)態(tài)面板交互窗格，添加動(dòng)作，等待 500毫秒，添加篩選 右邊

3.添加動(dòng)作 更新行 左邊 插入變量或函數(shù) [[TargetItem.index == leftindex]]

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

5.回到 更新行 +選擇列 select 值 1 ，并將更新行交互移動(dòng)到 設(shè)置變量值下

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

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

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

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

情形2：否則 如果”真” 復(fù)制粘貼 設(shè)置文本 交互 。

9.在概要窗格選中 “向左移動(dòng)” 動(dòng)態(tài)面板，回到交互窗格 添加篩選交互 規(guī)則 插入變量或函數(shù) [[TargetItem.linkeft == leftselect]]

預(yù)覽效果，點(diǎn)擊預(yù)覽，在預(yù)覽頁(yè)面，拖動(dòng)“左邊”一級(jí)選擇中元件右邊選擇器會(huì)同步篩選結(jié)果。

右邊選擇器移動(dòng)效果

1.選中右邊選擇器中繼器元件，右鍵轉(zhuǎn)為動(dòng)態(tài)面板，在交互窗格 添加 拖動(dòng)時(shí)，移動(dòng) 當(dāng)前 跟隨垂直拖動(dòng)，跟左側(cè)是一樣的。

2.新建交互 拖動(dòng)結(jié)束時(shí) 移動(dòng) 當(dāng)前 到達(dá)

3.選中當(dāng)前元件，右鍵，轉(zhuǎn)為動(dòng)態(tài)面板 ，復(fù)制 “向左移動(dòng)”動(dòng)態(tài)面板 設(shè)置變量值、移動(dòng)交互粘貼到第二層動(dòng)態(tài)面板

4.選中 設(shè)置變量值 交互 目標(biāo) 添加變量 rightindex

將變量值 目標(biāo) 改為 rightindex 其他不變

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

6.添加拖動(dòng)邊界

選中 拖動(dòng)時(shí)交互，點(diǎn)擊更多選項(xiàng) 添加邊界，頂部 大于等于 插入變量或函數(shù) [[30-This.height]]， 底部 小于等于 插入變量或函數(shù) [[This.height]]

選中右邊第一層動(dòng)態(tài)面板，在樣式窗格中，設(shè)置高度為 30，設(shè)置填充顏色為灰色 （#F2F2F2）

選中“右邊”動(dòng)態(tài)面板，雙擊進(jìn)入中繼器矩形，填充顏色設(shè)置為透明，線寬設(shè)為0。

預(yù)覽效果，點(diǎn)擊預(yù)覽，在預(yù)覽頁(yè)面，拖動(dòng)“左邊”一級(jí)選擇中元件右邊選擇器顯示效果和左邊同步。

添加默認(rèn)選擇

1.在項(xiàng)目列表中 選擇 全局變量 選中l(wèi)eftindex 設(shè)置默認(rèn)值為 1

2.選中右邊選擇器第一層動(dòng)態(tài)面板，在交互窗格命名為 右邊，第二層動(dòng)態(tài)面板命名為向右移動(dòng)。

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

預(yù)覽效果，點(diǎn)擊預(yù)覽，在預(yù)覽頁(yè)面，拖動(dòng)“左邊”一級(jí)選擇中元件，右邊選擇器只顯示左邊選項(xiàng)對(duì)應(yīng)結(jié)果。

1.在中繼器 樣式 窗格 數(shù)據(jù)表中 可以修改一級(jí)選擇器和二級(jí)選擇器的內(nèi)容，*二級(jí)選擇器的內(nèi)容需要和一級(jí)選擇器的內(nèi)容有關(guān)聯(lián)。

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

預(yù)覽效果，點(diǎn)擊預(yù)覽，在預(yù)覽頁(yè)面，拖動(dòng)“左邊”一級(jí)選擇中元件，右邊選擇器會(huì)同步顯示對(duì)應(yīng)結(jié)果。

預(yù)覽地址：https://hfez21.axshare.com