Axure教程:中继器做手机版日期选择器和日历

2020年7月2日09:37:17 发表评论 200 views

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

01 效果演示

1. 手机日历

鼠标上下、左右滑动效果

这里手机真实效果一直哈。而且日历都是标准的日历,不会有错哦,还不需要联网。

Axure教程:中继器做手机版日期选择器和日历

点击查看年视图

同样的年视图里面也可以上下左右滑动选择年份哦。

Axure教程:中继器做手机版日期选择器和日历

点击月份回到月视图

Axure教程:中继器做手机版日期选择器和日历

选择日期

Axure教程:中继器做手机版日期选择器和日历

选择今日

Axure教程:中继器做手机版日期选择器和日历

2. 滑动日期选择器

Axure教程:中继器做手机版日期选择器和日历

02 制作教学

1. 手机版日历

首先我们要做这个页面

Axure教程:中继器做手机版日期选择器和日历

用中继器做,中继器内只需要两列column0和xuanzhong

中继器新增42行,因为6*7日=42,有的同学可能会问,老师5行不够吗,你们看一下下图就知道为什么要六行了。

Axure教程:中继器做手机版日期选择器和日历

中继器网格分布,每排项目数为7,列表格什么都不需要填,只是用于逻辑处理。

下面我们简单说一下逻辑,我们要找到某年某月的第一天是星期几,然后设置中继器那一格显示1,之后的按2、3、4……下去即可。这里有一点需要注意的,我们要记住1、3、5、7、8、10、12月有31天,4、6、9、11月有30天,2月有28或29天。

我们先处理简单的

用now函数可以获取现在的日期,然后用函数获取今天是几号,再计算今天距离1号隔了几天,例如今天是2019年5月22日,那么距离2019年5月1日就隔了-21日,然后用add函数,[[(days)]],(days)就是填隔了多少天,上述案例是-21,接着用函数,就可以得到是周几了,注意,如果是周日的值是0,周一是1……,案例中的值为5.

那如果中继器的序号小于等于的值,设置文本为空(就是中继器前5行为空值);如果序号大于+31,也是设置文本为空,这里需要分情况,如果是1、3、5、7、8、10、12月的话是31,代表已经是下个月的日期了。那如果是4、6、9、11月应该是30天,2月应为28或29天,那怎么判断是28还是29呢。用年份/4,如果结果包含小数点的就是28天,没包含的就是29天。其余情况中继器内文本=序号-的值

上面就是计算当月的,那怎么计算其他月份的呢,用函数,计算年的就用函数就可。鼠标向左拖动结束的时候,+1,然后重复上述操作。年视图也是一样,左拖动时,+1,重复上面操作。

那么右滑动其实就是-1。

然后xuanzhong就是,鼠标单击时,显示选中的颜色,开始进去的时候我们可以默认更新行,让今天日期被选中。

上面就是制作手机版日历的教程了。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: