編輯導讀：滑動選擇器在手機端是一個比較常見的元件，主要用於多資料情況下的選擇。本文作者從工作實踐出發，分享了手機版滾動選擇器的相關設計思路，避免大家走一些不必要的彎路。
效果展示：
準備：Axure 8（或Axure 9）軟體已安裝，掌握基本的軟體使用，掌握基礎的動態面板知識。
本教程知識點：
本文以基礎的單一選擇為例（多選擇可以將滑動區域、資料集模組進行復制，調整滑動區域、資料集寬度即可）。
一、功能滑鼠拖動滑輪進行資料選擇，滑動結束後，選中資料居中。
二、製作方式1. 製作基礎的靜態模組（注意元件命名，本案例涉及區域性變數關聯元件，元件命名有利於查詢對應元件）。
上遮蓋、下遮蓋製作了一個模糊的效果，實際製作為對應的矩形，填充漸變色（#FFFFFF（50%）–#FFFFFF（100%）），注意設定對應的角度，下遮蓋為-90°，上遮蓋為90°。（圖以上遮蓋為例，選中漸變左側。）
選中效果：設定選中為對應的純色矩形即可。（設定顏色主要是與背景有所區分，顏色可選APP主色或其它與背景有對比度的顏色）。
（1）繪圖區域拖入中繼器元件
（2）完成上下模糊區域
修改中繼器元件內部為文字標籤元件，調整字型元件的寬（375px）、高（35px），文字標籤元件字型設定對齊為左右居中，上下居中。
- 預設中繼器中是一個矩形可以手動刪除後拖入文字標籤元件。
- 技巧：矩形快速變為文字標籤元件：移除矩形背景色、移除矩形描邊即可。
（3）配置中繼器資料關聯
- 設定每項載入時，文字為中繼器對應list列表資料。
- list：中繼器表頭，自行修改（注：中繼器表頭目前不支援中文）。
- list資料：自行填寫（此處資料為滾動選擇器中的資料，可自行進行填寫，目前需大於等於7。）
（4）互動整體原理
（5）配置滑動互動
實現原理：整個滑動互動分為兩層。
- 第一層：使用者滑鼠拖動滑動區域動態面板移動後，資料集動態面板跟隨移動。
- 第二層：當滑動區域移動結束後，計算出滑動的資料距離，給資料集動態面板進行計算並進行上下對應調整（保證文案居中）。
滑動區域高度計算：滑動區域比資料集區域高6個數據高度（取決於顯示滑動區域多少）。
所有可以在載入是計算滑塊區域的高度：滑塊區域高度=中繼器資料個數35+額外高出的高度（635）。
（6）配置滑動區域互動
- 配置滑動區域可拖動的範圍
- 按照滑塊區域頂部為依據，設定頂部可移動區域為:[-滑塊高度+245（7個滑動展示區域），0]。計算依據參考整體互動原理。
（7）配置資料移動區域與展示
- 設定資料集跟隨滑動區域移動
- 計算出滑動區域移動後，資料集需要移動多少進行最後結果的調整。
計算方式：
滑動區域移動的距離取除35（單個數據高度）餘數的整。然後進行乘35。然後將資料區域約束在對應的滾動區域中。計算依據參考整體互動原理。
過程相對較為複雜，如果只是日常使用，下載對應原始檔更改資料即可，如果自行學習注意以下幾個互動：
- 注意滑動區域計算與資料集跟隨計算；
- 可以使用文字賦值展示互動的實際值進行修改對應的邏輯。
本文由 @Brose 原創釋出於人人都是產品經理，未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議。