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

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

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

效果演示

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

1. 拖動選擇

2. 快捷選擇

制作教程

1. 快捷選擇中繼器

這個中繼器非常簡單

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

2. 全部地區選擇中繼器

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

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

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

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

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

然后制作右邊中繼器，將左邊中繼器復制過去,插入多一列，把導入后：

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

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

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

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

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

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

題圖來自 Unsplash，基于CC0協議