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

简介: 【Axure教程】用中继器做手机版日期选择器和手机日历

今天和大家分享怎么用中继器制作手机版的日历。该原型使用方便,可直接使用,而且交互齐全完善,所以推荐给大家使用。这期的内容,数学公式比较多,可能有些小伙伴会不明白,喜欢原型或者有疑问的小伙伴们可以在下方评论处给我留言哦。

【原型预览】

用电脑点击左下方阅读原文或复制打开下面的原型预览地址

https://axhub.im/ax9/e4f2832e83281a58/#g=1

【原型下载】

方式2:https://weidian.com/item.html?itemID=3779544891


01 效果演示

1. 手机日历

1.1 鼠标上下、左右滑动效果

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


b81c414dd35bb5ae618e2c1561778db8.jpg

1.4 选择日期

edeaf217c9b732138147cc1eca28d865.jpg

1.4 选择今日

f4dde51109a41b3db76a5431fdfd089b.jpg

2. 滑动日期选择器

21715a843b14a42cd6a90ae467be13fc.jpg

02 制作教学

1. 手机版日历

首先我们要做这个页面

33a46daaea1d70a4a8b4f395aa77c088.png

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

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

5233a259a778c8e606b65d3617c14d41.png

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

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

我们先处理简单的

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

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

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

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

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

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

日期滑动选择器的制作跟上期我们讲的地区选择器的制作方法基本一致。有兴趣的小伙伴可以看回我之前的文章Axure教程:手机版地区选择器原型

作者:梓贤vigo;


微信公众号:Axure高保真原型,分享一系列产品经理常用的原型模板、教程、视频、文档等原创内容


本文由微信公众号:Axure高保真原型 授权发布,未经许可,禁止转载

相关文章
|
6月前
|
网络协议 Android开发 数据安全/隐私保护
Android手机上使用Socks5全局代理-教程+软件
Android手机上使用Socks5全局代理-教程+软件
4993 2
|
25天前
|
Android开发 数据安全/隐私保护 虚拟化
安卓手机远程连接登录Windows服务器教程
安卓手机远程连接登录Windows服务器教程
55 4
|
26天前
|
API
查询城市手机号段免费API接口教程
此API用于查询指定城市的手机号段、服务商、区号、邮编等信息。支持POST或GET请求,需提供用户ID、KEY及城市名称等参数。返回数据包括状态码、信息提示、查询数量、最大页码、当前页码、省份、城市、区号、邮编、区划代码及数据集等。示例中提供的ID和KEY为公共测试用,建议使用个人ID和KEY以获得更高的调用频率。
|
26天前
|
API
手机号段查询城市免费API接口教程
此接口用于根据手机号段查询相关信息,包括城市、运营商、区号等。支持POST和GET请求,需提供用户ID、KEY及手机号段前7位作为参数。返回数据包含状态码、信息提示及详细归属信息。示例请求地址:https://cn.apihz.cn/api/ip/haoduan.php?id=88888888&key=88888888&numbers=1321993。接口免费,建议使用个人ID与KEY以独享调用频次。
|
27天前
|
API
查手机号归属地免费API接口教程
此API用于查询指定手机号码的归属地信息,包括号段、省份、城市、运营商等。支持POST和GET请求方式,需提供用户ID、KEY及手机号作为参数。返回结果包含状态码、信息提示及详细归属地信息。示例请求地址:https://cn.apihz.cn/api/ip/shouji.php?id=88888888&key=88888888&phone=13219931963。
|
2月前
|
存储 Android开发 网络架构
点心云-N1盒子、机顶盒、手机等设备-小白保姆式刷机教程
本文介绍了N1盒子的刷机教程,包括未刷机和已刷其他系统的N1。教程详细列出了所需工具和具体步骤,如下载工具包、制作安装盘、打开ADB模式、降级、刷入新系统等,确保用户能够顺利完成刷机操作。对于已刷第三方系统的N1,还提供了解决USB线不被识别、驱动问题及供电不足等常见问题的方法。
207 1
点心云-N1盒子、机顶盒、手机等设备-小白保姆式刷机教程
|
5月前
|
前端开发 小程序
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
422 0
|
6月前
Discuz 手机版访问自动跳转到手机域名
Discuz 手机版访问自动跳转到手机域名
98 1
|
5月前
|
Linux 网络安全 数据安全/隐私保护
网络安全教程-------渗透工具Kali,官网链接,ARM的介绍,Mobil,华为小米,oppe手机,是无法刷入第三方的操作系统的,E+手机,谷歌的picksoul,或者三星手机,系统盘是WSL的
网络安全教程-------渗透工具Kali,官网链接,ARM的介绍,Mobil,华为小米,oppe手机,是无法刷入第三方的操作系统的,E+手机,谷歌的picksoul,或者三星手机,系统盘是WSL的
|
6月前
|
开发工具
云控微信开发SDK使用教程--手机微信朋友圈图片上传服务端
云控微信开发SDK使用教程--手机微信朋友圈图片上传服务端

热门文章

最新文章