Axure实战19:创建一个“每日一句”网站

·  阅读 1757
Axure实战19:创建一个“每日一句”网站

在本章中,你将学会使用中继器和交互动作创建一个“每日一句”网站。

项目背景

在读书时期,看到优美的句子都会拿个本子记下来。那时候,真的摘抄了满满一本子的句子,也获得极大的满足感。现如今互联网发达了,也就渐渐开始不用笔写东西了,那种美好的时光也就成了回忆。

某个晚上突然想到,要是有个网站或者App能够在每天早上随机推送一个优美或励志的句子,那么这一天也将充满能量。

在网上找了找,发现倒是有不少这样的网站和应用,那我们也沿着这个思路,创建一个“每日一句”网站。

1.png

那么,我们开始吧。

项目搭建

首先,创建一个新项目,命名为OneSentence。

2.png

页面样式

页面样式部分,设置页面背景填充颜色为#F0F2F5。

拖入一个“矩形1”组件,命名为“card”。

设置位置为(40,40),设置大小为660*100,设置字号为17,线宽为0,圆角半径为8,左右边距为20,上下边距为10。

3.png

拖入一个“按钮”组件,设置位置为距离card矩形40的位置。

设置字号为14,线宽颜色为#DCDFE6,圆角半径为8。

4.png

以上,我们的基础样式就完成了。

逻辑分析

接下来,我们分析一下实现的逻辑。

首先我们需要准备示例数据列表,它包含我们需要的句子数据。然后每当我们点击“换一批”的按钮时,展示的Card卡片中的文字会随机从数据列表中取。

明白这两个核心逻辑后,我们看看如何实现它。

交互动作-中继器

示例数据部分,我们可以使用中继器作为数据载体。

5.png

拖入一个“中继器”组件,进入内页,删掉示例的矩形,将Card矩形剪切进去。

并在“交互”工具栏中,设置每项加载时的交互,选择“设置文本”,选择目标为“card”,设置文本为“[[item.Column0]]”。

然后在“样式”工具栏,除了放入一堆的示例数据,我们还需要设置分页,保证我们每次只展示一个卡片。

6.png

我们设置了分页,勾选“多页显示”,每页项数量设置为1,起始位1。

这样,我们中继器在遍历数据的时候,只会展示一条数据,这是因为它采用了分页,每一页只展示一张卡片。

交互动作-随机页

我们关闭中继器,接下来我们要实现点击“换一批”,中继器随机切换展示的页。

我们选中“换一批”按钮,在“交互”工具栏中新增一个“单击时”的交互,选择“设置当前显示页面”,目标为中继器,设置值为:

[[Math.ceil(10*Math.random())]]
复制代码

7.png

科普一个知识点。

Math.random():产生随机数

Math.ceil(x):取整

我们使用这两个函数组合,获得了10以内的随机数。

项目预览

完成后,我们在浏览器中预览下效果。

1.png

哈哈哈,效果不错!

为了让这个项目能够公开访问,我们可以生成html文件,然后发布到gitHub或者gitee中,这样就可以将网站分享给朋友们了。

网址地址

“每日一句”网站:  ricardowesley.gitee.io/onesentence

快来动手试试吧!

如果本专栏对你有帮助,不妨点赞、评论、关注~

分类:
开发工具
收藏成功!
已添加到「」, 点击更改