今天教大家怎麼做一個app版的地區選擇器原型，看怎麼在Axure中實現~

該原型內已包含全國一二級省市數據，可以直接使用。如果需要修改成其他（例如時間選擇器），修改頁非常方便，因為該原型用中繼器做的，所以修改的時候只需要簡單填寫表格內容即可，也可以當做學習中繼器交互的案例。

接下來作者也會嘗試做視頻教程，如有喜歡該原型或者有什麼疑問，希望您能收藏和評論回個6，作者完成視頻教程之後，會馬上更新。

效果演示

演示地址：https://jiuere.axshare.com/#g=1&amp;p=%E4%BA%8C%E7%BA%A7%E5%9F%8E%E5%B8%82%E9%80%89%E6%8B%A9%E5%99%A8_1_

1. 拖動選擇

這個中繼器非常簡單

每項加載時，設置中繼器內文本框文字=item.column0，鼠標單擊文本框時，設置位置文本框文字=column1+column2。

這裡其實是兩個中繼器，先說左邊的中繼器。

每項加載時，每項加載時，設置中繼器內文本框文字=item.column0，如果xuanzhong=1，選中該行，默認第一行選中。然後將中繼器轉為動態面板（內面板），之後再轉一次動態面板（外面板）。

外面板取消自動調整內容尺寸，自己調節大小；外面板拖動時，垂直拖動內面板；外面板拖動結束時，移動內面板到絕對位置=內面板的y值/中繼器每行高度，然後用fixed函數取整數，再乘中繼器每行高度。這樣做的目的就可以保證拖動選擇不會卡在兩個選項中間。

拖動結束時，更新行，先把所有行的選中設為0，即未選中，然後通過計算移動了多少格，選中item.index==移動的格數：(內面板的y值-初始y值)/每行的高度，然後fixed四捨五入後用abs函數去絕對值，再+1。

這樣左邊中繼器就完成了。

然後製作右邊中繼器，將左邊中繼器複製過去,插入多一列，把導入後：

每項加載時，設置文本框文字=column1，其他不變。

然後左邊中繼器行被選中時，篩選右邊中繼器，條件為column0=column1，篩選完成後更新第一行的選中=1。

最後是確定和取消按鈕的事件。

鼠標單擊確定按鈕時，設置城市文本=左邊中繼器選中的column0+右邊中繼器選中的column1，然後隱藏該彈窗，鼠標單擊取消按鈕時，隱藏該彈窗。

那本次教程就完成了，因為裡面涉及多個中繼器，對新手而言會有點難理解，所以作者正在錄製教程視頻，希望可以手把手教您們製作。所以希望您能收藏和評論回個6，作者完成視頻教程之後，會馬上更新。

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

題圖來自 Unsplash，基於CC0協議