編輯導讀：滑動選擇器在手機端是一個比較常見的組件，主要用於多數據情況下的選擇。本文作者從工作實踐出發，分享了手機版滾動選擇器的相關設計思路，避免大家走一些不必要的彎路。

效果展示：

準備：Axure 8（或Axure 9）軟件已安裝，掌握基本的軟件使用，掌握基礎的動態面板知識。

本教程知識點：

1. 進階的動態面板使用。
2. 基礎函數應用。
3. 基礎中繼器應用。

本文以基礎的單一選擇爲例（多選擇可以將滑動區域、數據集模塊進行復制，調整滑動區域、數據集寬度即可）。

一、功能

鼠標拖動滑輪進行數據選擇，滑動結束後，選中數據居中。

二、製作方式

1. 製作基礎的靜態模塊

（注意元件命名，本案例涉及局部變量關聯元件，元件命名有利於查找對應元件）。

2. 製作上遮蓋、選中、下遮蓋

上遮蓋、下遮蓋製作了一個模糊的效果，實際製作爲對應的矩形，填充漸變色（#FFFFFF（50%）–#FFFFFF（100%）），注意設置對應的角度，下遮蓋爲-90°，上遮蓋爲90°。（圖以上遮蓋爲例，選中漸變左側。）

選中效果：設置選中爲對應的純色矩形即可。（設置顏色主要是與背景有所區分，顏色可選APP主色或其它與背景有對比度的顏色）。

3. 製作數據集數據（中繼器基礎）

（1）繪圖區域拖入中繼器組件

（2）完成上下模糊區域

修改中繼器組件內部爲文本標籤元件，調整字體元件的寬（375px）、高（35px），文本標籤元件字體設置對齊爲左右居中，上下居中。

• 默認中繼器中是一個矩形可以手動刪除後拖入文本標籤元件。
• 技巧：矩形快速變爲文本標籤元件：移除矩形背景色、移除矩形描邊即可。

（3）配置中繼器數據關聯

• 設置每項加載時，文字爲中繼器對應list列表數據。
• list：中繼器表頭，自行修改（注：中繼器表頭目前不支持中文）。
• list數據：自行填寫（此處數據爲滾動選擇器中的數據，可自行進行填寫，目前需大於等於7。）

（4）交互整體原理

（5）配置滑動交互

實現原理：整個滑動交互分爲兩層。

• 第一層：用戶鼠標拖動滑動區域動態面板移動後，數據集動態面板跟隨移動。
• 第二層：當滑動區域移動結束後，計算出滑動的數據距離，給數據集動態面板進行計算並進行上下對應調整（保證文案居中）。

滑動區域高度計算：滑動區域比數據集區域高6個數據高度（取決於顯示滑動區域多少）。

所有可以在載入是計算滑塊區域的高度：滑塊區域高度=中繼器數據個數35+額外高出的高度（635）。

（6）配置滑動區域交互

• 配置滑動區域可拖動的範圍
• 按照滑塊區域頂部爲依據，設置頂部可移動區域爲:[-滑塊高度+245（7個滑動展示區域），0]。計算依據參考整體交互原理。

（7）配置數據移動區域與展示

• 設置數據集跟隨滑動區域移動
• 計算出滑動區域移動後，數據集需要移動多少進行最後結果的調整。

計算方式：

滑動區域移動的距離取除35（單個數據高度）餘數的整。然後進行乘35。然後將數據區域約束在對應的滾動區域中。計算依據參考整體交互原理。

總結

過程相對較爲複雜，如果只是日常使用，下載對應源文件更改數據即可，如果自行學習注意以下幾個交互：

1. 注意滑動區域計算與數據集跟隨計算；
2. 可以使用文本賦值展示交互的實際值進行修改對應的邏輯。

本文由 @Brose 原創發佈於人人都是產品經理，未經許可，禁止轉載

題圖來自Unsplash，基於CC0協議。