酷播亮新聞
選擇器效果的實現，這裡有四個關鍵步驟，一起來看看~
關鍵步驟 1
新建一個矩形作為背景，為了方便計算，將矩形設置為寬300，高200；矩形設置為灰色&無邊框。
數據集為了方便，使用中繼器，寬300，高40，位於中間位置，插入9條數據。
上下有遮罩的效果，新建2個矩形，上下各高80，填充色為漸變效果。
為了實現拖動的效果，需要在中繼器上覆蓋一個動態面板，同時將中繼器設置為動態面板，實現隨著面板的拖動，中繼器動態面板也跟著移動，覆蓋的動態面板寬 高與中繼器一致。
PS： 只有移動才有“跟隨”的動畫效果，選擇拖動的交互事件無“跟隨”可選擇。
為了讓拖動的面板保證只能“垂直拖動”，需要加交互事件“拖動時”。
關鍵步驟 2
此時需要作判斷，讓第一個選項與最後一個選項能有邊界劃分，如第一個選項向上拖動，就需要自動回到第一個選項，最後一個選項向下拖，需要回到最後 一個選項。
以上遮罩矩形的bottom進行邊界劃分：
此時X不變；
IF 拖動的面板.top>上遮罩矩形.bottom；
移動拖動面板到絕對位置拖動面板.X；Y到上遮罩矩形.bottom。
同理 ，最後一個選項也是如此，但是最後一個選項的移動Y的距離與上面的不一致，具體的可以通過手動在紙上進行模擬，就會算出來計算的公式。 （PS：Y與height是不一樣的）
關鍵步驟 3
因為中繼器的面板的長度是超過400，而且通過隱藏也是非常複雜，此時全選，將整個轉化為動態面板，調整寬高，可以想像為動態面板內的是可見的，動態面板外的 不可見。
需要實現拖動時回到最近的選項，此時要加判斷，判斷當前的選項在中繼器中的位置，使用數學函數實現，判斷思路：
拖動面板.top/40後取整數，取整函數tofixed(0).因計算的數值無法作為對象，此時再次使用數據函數math.min或者math.max將數值轉化為對象，此時的Y 值應該為Math.min（拖動面板.top/40）.tofixed(0)*40，拖動結束時加交互事件。
關鍵步驟 4
讀取數據到文本標籤元件，首先要判斷當前選項哪個數據，需要讀取當前的索引，先判斷當前滾動的條數與索引的對應關係，新建一個文本標籤’tishi’的文本為關鍵步驟3的 數學公式：
Math.min（拖動面板.top/40）.tofixed(0)
可以看出：索引與選項位置的對應關係： 3-位置=索引。
通過中繼器的過濾器（即篩選）可以顯示出對應索引的數據，但是！ 篩選的話，就無法顯示原始的數據，此時通過採用複制中繼器B，生成元件為空但是有數據的中繼器進行篩選，篩選後的數據讀取到提示的文本標籤。
注意！ 篩選後只剩一條數據，此時中繼器B只有1數據。 再從中繼器B中讀取數據到文本。
篩選條件： 通過索引進行篩選。
拖動面板中建立篩選器，將中繼器中的數據篩選出1條，中繼器再將數據讀取到其他元件。 篩選後數據出來，在中繼器B中讀取數據到文本。
文本頁面加載時會顯示最後的一條數據，此時需要判斷當前數據是否有進行篩選（即是否為1條數據），是的話進行顯示。
本文由 @ 啦啦啦 原創發佈於人人都是產品經理。 未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議