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

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

image.png

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

项目背景


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

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

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

image.png

那么,我们开始吧。

项目搭建


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

image.png

页面样式


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

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

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

image.png

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

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

image.png

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


逻辑分析


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

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

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


交互动作-中继器


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

image.png

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

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

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

image.png

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

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


交互动作-随机页


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

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

[[Math.ceil(10*Math.random())]]


image.png

科普一个知识点。


Math.random():产生随机数

Math.ceil(x):取整


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

项目预览


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

image.png

哈哈哈,效果不错!

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

网址地址


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

快来动手试试吧!



相关文章
|
6月前
|
API 数据库
Axure学习案例和项目
Axure学习案例和项目
|
6月前
|
存储 Java Linux
产品入门第一讲:Axure的安装以及基本使用
产品入门第一讲:Axure的安装以及基本使用
|
6月前
|
前端开发 UED
产品入门第四讲:Axure动态面板
产品入门第四讲:Axure动态面板
Axure快速入门(06) -动态面板例子
Axure快速入门(06) -动态面板例子
59 0
Axure快速入门(02) - 入门例子(登录案例)
Axure快速入门(02) - 入门例子(登录案例)
61 0
|
iOS开发 MacOS Windows
Axure快速入门(03) - 丰富的元件库
Axure快速入门(03) - 丰富的元件库
128 0
Axure快速入门(12) -轮播图案例
Axure快速入门(12) -轮播图案例
47 0
Axure快速入门(11) -函数总结
Axure快速入门(11) -函数总结
83 0
|
编解码 数据可视化 定位技术
Axure交互大全 全交互案例模板及视频教程
Axure交互大全 全交互案例模板及视频教程
|
数据可视化
【Axure教程】在PPT里演示原型模板
【Axure教程】在PPT里演示原型模板
下一篇
无影云桌面