原型预览地址:http://cloud.axureshop.com/i7e23d/#id=0z1y1z&p=%E6%89%8B%E6%9C%BA%E6%97%A5%E5%8E%86&g=1文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19636.html
01 效果演示
1. 手机日历
鼠标上下、左右滑动效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19636.html
这里手机真实效果一直哈。而且日历都是标准的日历,不会有错哦,还不需要联网。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19636.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19636.html
点击查看年视图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19636.html
同样的年视图里面也可以上下左右滑动选择年份哦。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19636.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19636.html
点击月份回到月视图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19636.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19636.html
选择日期文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19636.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19636.html
选择今日文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19636.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19636.html
2. 滑动日期选择器
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19636.html
02 制作教学
1. 手机版日历
首先我们要做这个页面文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19636.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19636.html
用中继器做,中继器内只需要两列column0和xuanzhong文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19636.html
中继器新增42行,因为6*7日=42,有的同学可能会问,老师5行不够吗,你们看一下下图就知道为什么要六行了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19636.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19636.html
中继器网格分布,每排项目数为7,列表格什么都不需要填,只是用于逻辑处理。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19636.html
下面我们简单说一下逻辑,我们要找到某年某月的第一天是星期几,然后设置中继器那一格显示1,之后的按2、3、4……下去即可。这里有一点需要注意的,我们要记住1、3、5、7、8、10、12月有31天,4、6、9、11月有30天,2月有28或29天。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19636.html
我们先处理简单的文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19636.html
用now函数可以获取现在的日期,然后用函数获取今天是几号,再计算今天距离1号隔了几天,例如今天是2019年5月22日,那么距离2019年5月1日就隔了-21日,然后用add函数,[[(days)]],(days)就是填隔了多少天,上述案例是-21,接着用函数,就可以得到是周几了,注意,如果是周日的值是0,周一是1……,案例中的值为5.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19636.html
那如果中继器的序号小于等于的值,设置文本为空(就是中继器前5行为空值);如果序号大于+31,也是设置文本为空,这里需要分情况,如果是1、3、5、7、8、10、12月的话是31,代表已经是下个月的日期了。那如果是4、6、9、11月应该是30天,2月应为28或29天,那怎么判断是28还是29呢。用年份/4,如果结果包含小数点的就是28天,没包含的就是29天。其余情况中继器内文本=序号-的值文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19636.html
上面就是计算当月的,那怎么计算其他月份的呢,用函数,计算年的就用函数就可。鼠标向左拖动结束的时候,+1,然后重复上述操作。年视图也是一样,左拖动时,+1,重复上面操作。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19636.html
那么右滑动其实就是-1。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19636.html
然后xuanzhong就是,鼠标单击时,显示选中的颜色,开始进去的时候我们可以默认更新行,让今天日期被选中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19636.html
上面就是制作手机版日历的教程了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19636.html