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

原型预览地址：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