想要制作一個日期選擇框，該怎么制作選擇日期的效果呢？平時我們查看電子日歷的時候，可以根據(jù)年份月份日期也發(fā)生改變，并可以點擊選擇日期，該怎么實現(xiàn)這個效果呢？下面我們就來看看詳細(xì)的教程。

原型設(shè)計工具Axure RP Pro 8.1特別版 中文漢化特別版(附漢化包+注冊碼+安裝教程)

• 類型：輔助設(shè)計
• 大?。?/span>90.5MB
• 語言：簡體中文
• 時間：2018-05-24

查看詳情

1、首先我們在Axure中拖動一個矩形作為日期選擇呈現(xiàn)，命名為日期選擇框，并按需設(shè)計效果，這里我設(shè)計懸停及選中為淺藍(lán)色

2、接著拖動一個矩形框作為承載日期的底部面板，在樣式中設(shè)計陰影效果

3、接著制作相關(guān)日期，相關(guān)箭頭可以在阿里巴巴矢量圖標(biāo)庫找到。拖動兩個矩形作為年和日期擺放，用兩種箭頭作為年和月的調(diào)整，即點擊雙箭頭跳上一年下一年的效果，單箭頭跳換上個月下個月的效果。同時為箭頭設(shè)置懸停效果

4、接下來設(shè)計日期，不屬于本月的時間字體較屬于本月的更灰些，同時鼠標(biāo)移至對應(yīng)日期時字體變?yōu)樗{(lán)色效果

5、之后將有關(guān)日期的組合并轉(zhuǎn)換為動態(tài)面板，并設(shè)置為隱藏

6、在日期選擇框中設(shè)計事件交互，當(dāng)點擊時切換顯示動態(tài)面板并向下滑動、隱藏動態(tài)面板并向上滑動。如圖

7、接下來設(shè)計選中相關(guān)日期時，日期選擇框文本變?yōu)檫x中日期的時間，以1號為例，新建單擊交互事件，當(dāng)點擊時日期選擇框為當(dāng)前年月（即一開始用來表示2019年12月的矩形）文本值加上選中的日期。動態(tài)面板向上滑動隱藏。設(shè)計完事件后點擊預(yù)覽沒問題之后將1號上的事件復(fù)制黏貼到其他可選擇的日期上。之后點擊預(yù)覽，可以看見基本的日期選中效果完成。

8、接下來我們要設(shè)計關(guān)于年和月的切換。關(guān)于這部分的思路大致如下：因為每一年每個月所對應(yīng)的日期都是不一樣的，所以需要利用動態(tài)面板建立多個狀態(tài)，當(dāng)點擊時設(shè)置動態(tài)面板切換到對應(yīng)的狀態(tài)即可。有興趣的朋友可以思考一下如何設(shè)計。

9、由于Axure演示原型時不需要這么準(zhǔn)確，所以我們可以點擊相關(guān)箭頭時使文本變成對應(yīng)文本就行，但是問題在于我們沒辦法知道當(dāng)前點擊時需要變成什么文本，點擊了多少次。所以要利用全局變量來實現(xiàn)這個效果。

10、回到年月的矩形框，我們先新建兩個全局變量，一個作為年，一個作為月，然后默認(rèn)年為2019，月默認(rèn)為12。

11、關(guān)于箭頭<的邏輯如下：當(dāng)點擊<時，

1）判斷當(dāng)前月是不是1月，如果是1月，全局變量year減一，全局變量month值為12月。

2）如果不是1月就全局變量month減一

關(guān)于年月的文本值為year年month月

12、關(guān)于箭頭>的邏輯如下：

1）如果當(dāng)前月為12月，全局變量year加一，全局變量month值為1月

2）如果當(dāng)前月不是12月，則全局變量month加一

關(guān)于年月的文本值為year年month月

13、關(guān)于箭頭《的邏輯比較簡單，點擊時全局變量year-1即可，最后再設(shè)置關(guān)于年月的文本值為year年month月。箭頭》同理，點擊時全局變量year+1即可，最后再設(shè)置關(guān)于年月的文本值為year年month月。如下圖

14、最后再點擊預(yù)覽，基本的日期選擇器交互效果就完成了

以上就是Axure設(shè)計日期選擇框的教程，希望大家喜歡，請繼續(xù)關(guān)注腳本之家。

相關(guān)推薦：

Axure中繼器怎么制作穿梭框效果?

axure怎么制作頁面標(biāo)簽切換的效果?

Axure模型怎么添加角標(biāo)? axure四分之一圓角標(biāo)的做法

最新評論