選擇器效果的實(shí)現(xiàn)，這里有四個(gè)關(guān)鍵步驟，一起來(lái)看看~

關(guān)鍵步驟 1

新建一個(gè)矩形作為背景，為了方便計(jì)算，將矩形設(shè)置為寬300，高200；矩形設(shè)置為灰色&無(wú)邊框。

數(shù)據(jù)集為了方便，使用中繼器，寬300，高40，位于中間位置，插入9條數(shù)據(jù)。

上下有遮罩的效果，新建2個(gè)矩形，上下各高80，填充色為漸變效果。

為了實(shí)現(xiàn)拖動(dòng)的效果，需要在中繼器上覆蓋一個(gè)動(dòng)態(tài)面板，同時(shí)將中繼器設(shè)置為動(dòng)態(tài)面板，實(shí)現(xiàn)隨著面板的拖動(dòng)，中繼器動(dòng)態(tài)面板也跟著移動(dòng)，覆蓋的動(dòng)態(tài)面板寬高與中繼器一致。

PS：只有移動(dòng)才有“跟隨”的動(dòng)畫(huà)效果，選擇拖動(dòng)的交互事件無(wú)“跟隨”可選擇。

為了讓拖動(dòng)的面板保證只能“垂直拖動(dòng)”，需要加交互事件“拖動(dòng)時(shí)”。

關(guān)鍵步驟 2

此時(shí)需要作判斷，讓第一個(gè)選項(xiàng)與最后一個(gè)選項(xiàng)能有邊界劃分，如第一個(gè)選項(xiàng)向上拖動(dòng)，就需要自動(dòng)回到第一個(gè)選項(xiàng)，最后一個(gè)選項(xiàng)向下拖，需要回到最后一個(gè)選項(xiàng)。

以上遮罩矩形的bottom進(jìn)行邊界劃分：

此時(shí)X不變；

IF 拖動(dòng)的面板.top>上遮罩矩形.bottom；

移動(dòng)拖動(dòng)面板到絕對(duì)位置拖動(dòng)面板.X；Y到上遮罩矩形.bottom。

同理 ，最后一個(gè)選項(xiàng)也是如此，但是最后一個(gè)選項(xiàng)的移動(dòng)Y的距離與上面的不一致，具體的可以通過(guò)手動(dòng)在紙上進(jìn)行模擬，就會(huì)算出來(lái)計(jì)算的公式。（PS：Y與height是不一樣的）

關(guān)鍵步驟 3

因?yàn)橹欣^器的面板的長(zhǎng)度是超過(guò)400，而且通過(guò)隱藏也是非常復(fù)雜，此時(shí)全選，將整個(gè)轉(zhuǎn)化為動(dòng)態(tài)面板，調(diào)整寬高，可以想象為動(dòng)態(tài)面板內(nèi)的是可見(jiàn)的，動(dòng)態(tài)面板外的不可見(jiàn)。

需要實(shí)現(xiàn)拖動(dòng)時(shí)回到最近的選項(xiàng)，此時(shí)要加判斷，判斷當(dāng)前的選項(xiàng)在中繼器中的位置，使用數(shù)學(xué)函數(shù)實(shí)現(xiàn)，判斷思路：

拖動(dòng)面板.top/40后取整數(shù)，取整函數(shù)tofixed(0).因計(jì)算的數(shù)值無(wú)法作為對(duì)象，此時(shí)再次使用數(shù)據(jù)函數(shù)math.min或者math.max將數(shù)值轉(zhuǎn)化為對(duì)象，此時(shí)的Y值應(yīng)該為Math.min（拖動(dòng)面板.top/40）.tofixed(0)*40，拖動(dòng)結(jié)束時(shí)加交互事件。

關(guān)鍵步驟 4

讀取數(shù)據(jù)到文本標(biāo)簽元件，首先要判斷當(dāng)前選項(xiàng)哪個(gè)數(shù)據(jù)，需要讀取當(dāng)前的索引，先判斷當(dāng)前滾動(dòng)的條數(shù)與索引的對(duì)應(yīng)關(guān)系，新建一個(gè)文本標(biāo)簽‘tishi’的文本為關(guān)鍵步驟3的數(shù)學(xué)公式：

Math.min（拖動(dòng)面板.top/40）.tofixed(0)

可以看出：索引與選項(xiàng)位置的對(duì)應(yīng)關(guān)系：3-位置=索引。

• 》2
• 》1
• 》0
• 》-1

通過(guò)中繼器的過(guò)濾器（即篩選）可以顯示出對(duì)應(yīng)索引的數(shù)據(jù)，但是！篩選的話(huà)，就無(wú)法顯示原始的數(shù)據(jù)，此時(shí)通過(guò)采用復(fù)制中繼器B，生成元件為空但是有數(shù)據(jù)的中繼器進(jìn)行篩選，篩選后的數(shù)據(jù)讀取到提示的文本標(biāo)簽。

注意！篩選后只剩一條數(shù)據(jù)，此時(shí)中繼器B只有1數(shù)據(jù)。再?gòu)闹欣^器B中讀取數(shù)據(jù)到文本。

篩選條件：通過(guò)索引進(jìn)行篩選。

拖動(dòng)面板中建立篩選器，將中繼器中的數(shù)據(jù)篩選出1條，中繼器再將數(shù)據(jù)讀取到其他元件。篩選后數(shù)據(jù)出來(lái)，在中繼器B中讀取數(shù)據(jù)到文本。

文本頁(yè)面加載時(shí)會(huì)顯示最后的一條數(shù)據(jù)，此時(shí)需要判斷當(dāng)前數(shù)據(jù)是否有進(jìn)行篩選（即是否為1條數(shù)據(jù)），是的話(huà)進(jìn)行顯示。

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

題圖來(lái)自Unsplash，基于CC0協(xié)議

愛(ài)盈利-運(yùn)營(yíng)小咖秀(www.jza6.com) 始終堅(jiān)持研究分享移動(dòng)互聯(lián)網(wǎng)App運(yùn)營(yíng)推廣經(jīng)驗(yàn)、策略、全案、渠道等純干貨知識(shí)內(nèi)容；是廣大App運(yùn)營(yíng)從業(yè)者的知識(shí)啟蒙、成長(zhǎng)指導(dǎo)、進(jìn)階學(xué)習(xí)的集聚平臺(tái)；

想了解更多移動(dòng)互聯(lián)網(wǎng)干貨知識(shí)，請(qǐng)關(guān)注微信公眾號(hào)運(yùn)營(yíng)小咖秀（ID: yunyingshow）