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

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

• 類(lèi)型：輔助設(shè)計(jì)
• 大?。?/span>90.5MB
• 語(yǔ)言：簡(jiǎn)體中文
• 時(shí)間：2018-05-24

查看詳情

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相關(guān)推薦：

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

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

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