今天教大家怎么做一個(gè)app版的地區(qū)選擇器原型，看怎么在Axure中實(shí)現(xiàn)~

該原型內(nèi)已包含全國(guó)一二級(jí)省市數(shù)據(jù)，可以直接使用。如果需要修改成其他（例如時(shí)間選擇器），修改頁非常方便，因?yàn)樵撛陀弥欣^器做的，所以修改的時(shí)候只需要簡(jiǎn)單填寫表格內(nèi)容即可，也可以當(dāng)做學(xué)習(xí)中繼器交互的案例。

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

效果演示

演示地址：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. 拖動(dòng)選擇

2. 快捷選擇

制作教程

1. 快捷選擇中繼器

這個(gè)中繼器非常簡(jiǎn)單

每項(xiàng)加載時(shí)，設(shè)置中繼器內(nèi)文本框文字=item.column0，鼠標(biāo)單擊文本框時(shí)，設(shè)置位置文本框文字=column1+column2。

2. 全部地區(qū)選擇中繼器

這里其實(shí)是兩個(gè)中繼器，先說左邊的中繼器。

每項(xiàng)加載時(shí)，每項(xiàng)加載時(shí)，設(shè)置中繼器內(nèi)文本框文字=item.column0，如果xuanzhong=1，選中該行，默認(rèn)第一行選中。然后將中繼器轉(zhuǎn)為動(dòng)態(tài)面板（內(nèi)面板），之后再轉(zhuǎn)一次動(dòng)態(tài)面板（外面板）。

外面板取消自動(dòng)調(diào)整內(nèi)容尺寸，自己調(diào)節(jié)大小；外面板拖動(dòng)時(shí)，垂直拖動(dòng)內(nèi)面板；外面板拖動(dòng)結(jié)束時(shí)，移動(dòng)內(nèi)面板到絕對(duì)位置=內(nèi)面板的y值/中繼器每行高度，然后用fixed函數(shù)取整數(shù)，再乘中繼器每行高度。這樣做的目的就可以保證拖動(dòng)選擇不會(huì)卡在兩個(gè)選項(xiàng)中間。

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

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

然后制作右邊中繼器，將左邊中繼器復(fù)制過去,插入多一列，把導(dǎo)入后：

每項(xiàng)加載時(shí)，設(shè)置文本框文字=column1，其他不變。

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

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

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

那本次教程就完成了，因?yàn)槔锩嫔婕岸鄠€(gè)中繼器，對(duì)新手而言會(huì)有點(diǎn)難理解，所以作者正在錄制教程視頻，希望可以手把手教您們制作。所以希望您能收藏和評(píng)論回個(gè)6，作者完成視頻教程之后，會(huì)馬上更新。

本文由 @梓賢Vigo 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于CC0協(xié)議