中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

本文系用中繼器實(shí)現(xiàn)的日歷效果（最終的效果在文章最后），當(dāng)然你可以直接手繪，甚至截圖一個(gè)現(xiàn)成的日歷，本文僅僅提供另外的一種實(shí)現(xiàn)方法。

按照此方法實(shí)現(xiàn)的日歷支持以下功能：

• 可以在中繼器中配置當(dāng)前日期，當(dāng)前日期的背景顯示灰色圓圈；
• 可以在中繼器中配置某天是否顯示紅點(diǎn)；
• 可以在中繼器中配置本月1日從星期幾開始。

本文僅適用于具有一定Axure使用經(jīng)驗(yàn)的用戶閱讀。

Axure版本：9.0

實(shí)現(xiàn)步驟

添加星期 -> 添加天 -> 添加今日背景 -> 添加紅點(diǎn)效果。

1. 添加星期

1）在頁面中添加一個(gè)中繼器控件，使用中繼器中默認(rèn)的圖形，去掉其邊框線并設(shè)置圖形的寬度和高度。寬度等于原型圖的寬度除以7（這里以小米MIX2S的屏幕寬度392/7=56設(shè)置），高度設(shè)置為40（高度根據(jù)自己的喜好設(shè)計(jì)即可），這些都設(shè)置好之后效果如下：

2）為中繼器中的矩形命名，如weekday，命名的目的是為了方便為其賦值。

3）修改中繼器綁定的數(shù)據(jù)，將列名修改為weekday（不修改也可以，這里是我個(gè)人的職業(yè)習(xí)慣），添加7行數(shù)據(jù)，分別填入數(shù)據(jù)一、二、三、四、五、六、日，配置之后效果如下：

4）此時(shí)預(yù)覽效果發(fā)現(xiàn)數(shù)據(jù)是縱向排列的，如下圖：

5）選擇中繼器，設(shè)置其布局方式為橫向換行，每行7項(xiàng)，如下圖：

6）再次預(yù)覽，星期就變成橫向的啦。至此，星期就添加完成了。

2. 添加天

1）在頁面中再次添加一個(gè)中繼器控件，使用中繼器中默認(rèn)的圖形，去掉其邊框線并設(shè)置圖形的寬度和高度，這里寬度、高度都設(shè)置為56（與上述的星期寬度相等）。

2）為中繼器中的矩形命名，如days，命名的目的是為了方便為其賦值。

3）修改中繼器綁定的數(shù)據(jù)，將列名修改為days（這里最好修改一下列名以方便數(shù)據(jù)綁定），添加30行，數(shù)據(jù)分別錄入1-30，輸入時(shí)有一個(gè)小技巧，鼠標(biāo)點(diǎn)擊某一行后直接輸入值然后回車輸入下一行的值，無需讓單元格變?yōu)榫庉嫚顟B(tài)再輸入。

完成后效果如下：

4）同理設(shè)置中繼器的布局方式為橫向換行，每行7項(xiàng)，設(shè)置好之后預(yù)覽效果如下：

5）如果想要1號(hào)從周三開始，需要在中繼器的數(shù)據(jù)前兩行插入兩個(gè)空行即可，如下圖示：

6）至此，日歷的效果已經(jīng)做好了。

3. 添加“今日”背景

1）編輯章節(jié)2《添加天》的中繼器，在正方形組件上層添加一個(gè)圓形，命名為todayBg，寬高與正方形相同，且位于正方形的中心，填充色設(shè)置為藍(lán)色，字體設(shè)置為白色加粗，如下圖：

2）設(shè)置藍(lán)色背景只在今日日期顯示（可以設(shè)置任意一天為今日），為了達(dá)到這個(gè)效果，需要為中繼器添加條件，如下：

a) 中繼器增加一列，命名為today，并隨意設(shè)置某行的該列值為1，這里我把15號(hào)設(shè)置為1，即15為“今日”。

b) 將藍(lán)色背景設(shè)置為隱藏，且放置于正方形的下一層，即被正方形遮住。

c) 設(shè)置中繼器“每項(xiàng)加載時(shí)”的條件邏輯，判斷如果today值為1時(shí)顯示藍(lán)色背景，并設(shè)置藍(lán)色背景todayBg的文本為將該行的days值。

d) 上述步驟如果設(shè)置正確，今日的樣式就可以顯示了出來了，如下：

3）此時(shí)，再為“每項(xiàng)加載時(shí)”添加一個(gè)條件邏輯，用于顯示非今日的日期即可，如下：

4）到這一步今日背景也添加完成了，效果圖如下：

4. 添加紅點(diǎn)效果

一般而言，需要在日歷上的某一天顯示一個(gè)標(biāo)記，以表示該天有相關(guān)記錄，下面我們?yōu)槿諝v在添加紅點(diǎn)效果。

1）繼續(xù)編輯上述中繼器，在靠近正方形上邊緣的地方放置一個(gè)圓形，命名為mark，寬度和高度都設(shè)置為8，填充色為紅色，效果圖如下：

2）為中繼器數(shù)據(jù)增加一列，命名為mark，在需要顯示紅點(diǎn)標(biāo)記的行設(shè)置mark列的值為1，如下圖示：

3）設(shè)置紅點(diǎn)mark隱藏。

4）同上所述，為中繼器“每項(xiàng)加載時(shí)”再添加一個(gè)條件邏輯，當(dāng)mark值等于1時(shí)顯示紅點(diǎn)標(biāo)記，并置于頂層，如下圖設(shè)置：

注意：一定要像截圖這樣將ELSE IF切換為IF，切換之后的條件如下圖：

5）至此，日歷的功能就全部完成了。最終的實(shí)現(xiàn)的效果見下圖：

5. 總結(jié)

本文為了描述清晰，將關(guān)鍵性的步驟都截了圖供大家參考。這個(gè)日歷效果的制作過程看似繁瑣，但如果理解了中繼器的實(shí)現(xiàn)原理，實(shí)際操作的時(shí)候并不復(fù)雜?？筛鶕?jù)實(shí)際項(xiàng)目的需要如需進(jìn)一步強(qiáng)化功能。

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

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