Axure教程:用中繼器做手機(jī)版日期選擇器和手機(jī)日歷

7 評論 7029 瀏覽 26 收藏 6 分鐘

本文仔細(xì)介紹了中繼器制作手機(jī)版日歷的步驟與注意要點(diǎn),希望對你有所啟發(fā)。

今天和大家分享怎么用中繼器制作手機(jī)版的日歷。該原型使用方便,可直接使用,而且交互齊全完善,所以推薦給大家使用。這期的內(nèi)容,數(shù)學(xué)公式比較多,可能有些小伙伴會不明白,喜歡原型或者有疑問的小伙伴們可以在下方評論處給我留言哦。

原型預(yù)覽地址:http://cloud.axureshop.com/i7e23d/#id=0z1y1z&p=%E6%89%8B%E6%9C%BA%E6%97%A5%E5%8E%86&g=1

01 效果演示

1. 手機(jī)日歷

1.1 鼠標(biāo)上下、左右滑動(dòng)效果

這里手機(jī)真實(shí)效果一直哈。而且日歷都是標(biāo)準(zhǔn)的日歷,不會有錯(cuò)哦,還不需要聯(lián)網(wǎng)。

1.2 點(diǎn)擊查看年視圖

同樣的年視圖里面也可以上下左右滑動(dòng)選擇年份哦。

1.3 點(diǎn)擊月份回到月視圖

1.4 選擇日期

1.4 選擇今日

2. 滑動(dòng)日期選擇器

02 制作教學(xué)

1. 手機(jī)版日歷

首先我們要做這個(gè)頁面

用中繼器做,中繼器內(nèi)只需要兩列column0和xuanzhong

中繼器新增42行,因?yàn)?*7日=42,有的同學(xué)可能會問,老師5行不夠嗎,你們看一下下圖就知道為什么要六行了。

中繼器網(wǎng)格分布,每排項(xiàng)目數(shù)為7,列表格什么都不需要填,只是用于邏輯處理。

下面我們簡單說一下邏輯,我們要找到某年某月的第一天是星期幾,然后設(shè)置中繼器那一格顯示1,之后的按2、3、4……下去即可。這里有一點(diǎn)需要注意的,我們要記住1、3、5、7、8、10、12月有31天,4、6、9、11月有30天,2月有28或29天。

我們先處理簡單的

用now函數(shù)可以獲取現(xiàn)在的日期,然后用get.date函數(shù)獲取今天是幾號,再計(jì)算今天距離1號隔了幾天,例如今天是2019年5月22日,那么距離2019年5月1日就隔了-21日,然后用add函數(shù),[[Now.addDays(days)]],(days)就是填隔了多少天,上述案例是-21,接著用get.day函數(shù),就可以得到是周幾了,注意,如果是周日get.day的值是0,周一是1……,案例中g(shù)et.day的值為5.

那如果中繼器的序號小于等于get.day的值,設(shè)置文本為空(就是中繼器前5行為空值);如果序號大于get.day+31,也是設(shè)置文本為空,這里需要分情況,如果是1、3、5、7、8、10、12月的話是31,代表已經(jīng)是下個(gè)月的日期了。那如果是4、6、9、11月應(yīng)該是30天,2月應(yīng)為28或29天,那怎么判斷是28還是29呢。用年份/4,如果結(jié)果包含小數(shù)點(diǎn)的就是28天,沒包含的就是29天。其余情況中繼器內(nèi)文本=序號-get.day的值

上面就是計(jì)算當(dāng)月的,那怎么計(jì)算其他月份的呢,用add.month函數(shù),計(jì)算年的就用add.year函數(shù)就可。鼠標(biāo)向左拖動(dòng)結(jié)束的時(shí)候,add.month+1,然后重復(fù)上述操作。年視圖也是一樣,左拖動(dòng)時(shí),add.year+1,重復(fù)上面操作。

那么右滑動(dòng)其實(shí)就是-1。

然后xuanzhong就是,鼠標(biāo)單擊時(shí),顯示選中的顏色,開始進(jìn)去的時(shí)候我們可以默認(rèn)更新行,讓今天日期被選中。

上面就是制作手機(jī)版日歷的教程了。

然后日期滑動(dòng)選擇器的制作跟上期我們講的地區(qū)選擇器的制作方法基本一致。有興趣的小伙伴可以看回我之前的文章Axure教程:手機(jī)版地區(qū)選擇器原型

那么我們這期的分享就到這里結(jié)束了,

這期的內(nèi)容,數(shù)學(xué)公式比較多,可能有些小伙伴會不明白,喜歡原型或者有疑問的小伙伴們可以在下方評論處給我留言哦。

 

本文由 @梓賢Vigo 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 你要寫就好好寫

    來自四川 回復(fù)
  2. 原型預(yù)覽及下載地址:
    https://axhub.im/ax9/e4f2832e83281a58

    來自廣東 回復(fù)
  3. 滑動(dòng)日期三級請問有視頻嗎
    大佬

    來自重慶 回復(fù)
  4. 滑動(dòng)日期選擇的教程可以出嗎?

    來自山東 回復(fù)
    1. 視頻?上期做了地區(qū)的視頻,沒有一個(gè)人看,浪費(fèi)了一天錄視頻的時(shí)間,所以應(yīng)該不會出了

      來自廣東 回復(fù)
    2. 好吧。我剛發(fā)現(xiàn)大神的文章,準(zhǔn)備一個(gè)一個(gè)跟著學(xué)一遍

      來自山東 回復(fù)
  5. 想學(xué)日期選擇

    來自山東 回復(fù)