Axure教程:手機版地區選擇器原型
今天教大家怎么做一個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協議
厲害
求視頻教程,已經實現了拖動到達指定位置,但是設置選中研究了2天沒研究出來,這個選中究竟是怎么弄的,
原型預覽及下載地址:
https://axhub.im/ax9/e4f2832e83281a58
求視頻教程
求視頻教程
教程辛苦了,留言支持
謝謝謝謝
6
基本操作哈哈哈哈哈哈哈哈哈哈