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

访客3年前黑客文章1116

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

本日和各人分享怎么用中继器建造手机版的日历。该原型利用利便,可直接利用,并且交互齐全完善,所以推荐给各人利用。这期的内容,数学公式较量多,大概有些小同伴会不大白,喜欢原型可能有疑问的小同伴们可以在下方评论处给我留言哦。

原型预览地点:

01 结果演示 1. 手机日历

1.1 鼠标上下、阁下滑动结果

这里手机真实结果一直哈。并且日历都是尺度的日历,不会有错哦,还不需要联网。

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

1.2 点击查察年视图

同样的年视图内里也可以上下阁下滑动选择年份哦。

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

1.3 点击月份回到月视图

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

1.4 选择日期

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

1.4 选择今天

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函数可以获取此刻的日期,然后用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教程:手机版地域选择器原型

那么我们这期的分享就到这里竣事了,

这期的内容,数学公式较量多,大概有些小同伴会不大白,喜欢原型可能有疑问的小同伴们可以在下方评论处给我留言哦。

相关文章

金融类APP界面设计规则探索(上):安全、认知

金融类APP界面设计规则探索(上):安全、认知

编辑导读:只要涉及到钱财方面的产物,用户老是会较量敏感的,尤其当下互联网信息泄露严重。那么互联网金融产物想要赢得更多用户,就必需在设计上做好引导。详细怎么做?本文作者从安详和认知这两个方面展开了具体说...

做社媒传播的「基本解法」

做社媒传播的「基本解法」

编辑导语:如今社交媒体的利用率很是高,社交媒体也成为品牌流传的前言之一;由于社交媒体的用户群体较大,所以对付品牌的投放以及定位都要注重;本文作者分享了关于社交媒体流传的根基解法,我们一起来看一下。...

猿辅导们有“缘”难“分”

猿辅导们有“缘”难“分”

编辑导语:固然线上教诲由来已久,可是本年疫情的溘然发作,将线上教诲行业推向了巅峰。个中,猿向导成为了行业巨头,入选“CCTV品牌强国工程”,成为2020年央视春晚特约相助同伴。本文作者为各人总结了:在...

从栅格系统实例,了解栅格基础知识

从栅格系统实例,了解栅格基础知识

本文将为各人先容设计网页里很是重要的一个网格系统,也叫栅格系统。那么栅格系统的浸染以及设计要点是什么呢?本文将为各人发表。 “UI设计的不就是这些细节,莫非要比谁画的圆更圆谁画的方更方嘛?” ——引...

产品的「感知价值」——促成购买的关键

产品的「感知价值」——促成购买的关键

编辑导语:在我们购物时,对一些商品会有本身固有的认知,好比:钻石很昂贵等;这就是消费者认为这个对象值得的代价,我们会意甘情愿的耗费更高的价值去购置;本文作者阐明白产物的感知代价对促成购置的影响。 本...

“红人经济+”如何助推新消费大循环

“红人经济+”如何助推新消费大循环

编辑导语:如今在这个新经济时代,新技能和贸易革命促进了经济成长,但大大都人接管不了这种加速的贸易模式;可是“红人经济+”是将来消费成长的一个新时机,本文作者阐明白“红人经济+”是怎么敦促新消费大轮回的...