axure怎么制作計時間選擇器效果？axure中想要制作一個自定義選擇時間，該怎么制作時間選擇器呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下

文章源自四五設(shè)計網(wǎng)-http://m.wasochina.com/37592.html

1、首先我們拖動一個矩形框，按自己需求設(shè)計樣式，我這里設(shè)置懸停樣式及選中樣式為淺藍(lán)色效果，可命名為選擇時間框文章源自四五設(shè)計網(wǎng)-http://m.wasochina.com/37592.html

文章源自四五設(shè)計網(wǎng)-http://m.wasochina.com/37592.html

2、接著拖動一個矩形作為底部面板，然后拖動幾個矩形作為時間數(shù)據(jù)，矩形的懸停效果也為淺藍(lán)色。時間按需求設(shè)定，這里各15分鐘一個時間。文章源自四五設(shè)計網(wǎng)-http://m.wasochina.com/37592.html

文章源自四五設(shè)計網(wǎng)-http://m.wasochina.com/37592.html

3、接著將時間組件的矩形組合，并轉(zhuǎn)換為動態(tài)面板文章源自四五設(shè)計網(wǎng)-http://m.wasochina.com/37592.html

文章源自四五設(shè)計網(wǎng)-http://m.wasochina.com/37592.html

4、接著要實現(xiàn)選擇時間時的滾動效果，選擇動態(tài)面板然后右鍵選擇滾動條-垂直滾動。文章源自四五設(shè)計網(wǎng)-http://m.wasochina.com/37592.html

文章源自四五設(shè)計網(wǎng)-http://m.wasochina.com/37592.html

5、以上基本效果設(shè)計好，接下來設(shè)計交互選中，邏輯主要如下：1、點擊選擇時間框，動態(tài)面板交替下拉推動顯示、推動上拉隱藏2、選擇時間，選擇時間框獲取到該選項數(shù)據(jù)，并且動態(tài)面板推動上拉隱藏。文章源自四五設(shè)計網(wǎng)-http://m.wasochina.com/37592.html

1）我們將動態(tài)面板設(shè)置為隱藏。

2）第二步新建時間選擇框的單擊時交互事件，如下圖，完成之后可點擊預(yù)覽看基本的交互效果。

3）雙擊進(jìn)入動態(tài)面板，在每一個時間選項的矩形框，設(shè)計單擊交互事件，即選中時時間選擇框的文本值為當(dāng)前時間選項的文本，如下圖以8:15的為例設(shè)置為即可預(yù)覽效果。

6、值得注意的是最好利用變量去設(shè)置文本，不然每個時間的文本你都需要自己輸文字，所以利用變量的話其他時間的單擊事件直接復(fù)制黏貼的話就好了。