在本章中,你将学会使用中继器和交互动作创建一个“每日一句”网站。
项目背景
在读书时期,看到优美的句子都会拿个本子记下来。那时候,真的摘抄了满满一本子的句子,也获得极大的满足感。现如今互联网发达了,也就渐渐开始不用笔写东西了,那种美好的时光也就成了回忆。
某个晚上突然想到,要是有个网站或者App能够在每天早上随机推送一个优美或励志的句子,那么这一天也将充满能量。
在网上找了找,发现倒是有不少这样的网站和应用,那我们也沿着这个思路,创建一个“每日一句”网站。
那么,我们开始吧。
项目搭建
首先,创建一个新项目,命名为OneSentence。
页面样式
页面样式部分,设置页面背景填充颜色为#F0F2F5。
拖入一个“矩形1”组件,命名为“card”。
设置位置为(40,40),设置大小为660*100,设置字号为17,线宽为0,圆角半径为8,左右边距为20,上下边距为10。
拖入一个“按钮”组件,设置位置为距离card矩形40的位置。
设置字号为14,线宽颜色为#DCDFE6,圆角半径为8。
以上,我们的基础样式就完成了。
逻辑分析
接下来,我们分析一下实现的逻辑。
首先我们需要准备示例数据列表,它包含我们需要的句子数据。然后每当我们点击“换一批”的按钮时,展示的Card卡片中的文字会随机从数据列表中取。
明白这两个核心逻辑后,我们看看如何实现它。
交互动作-中继器
示例数据部分,我们可以使用中继器作为数据载体。
拖入一个“中继器”组件,进入内页,删掉示例的矩形,将Card矩形剪切进去。
并在“交互”工具栏中,设置每项加载时的交互,选择“设置文本”,选择目标为“card”,设置文本为“[[item.Column0]]
”。
然后在“样式”工具栏,除了放入一堆的示例数据,我们还需要设置分页,保证我们每次只展示一个卡片。
我们设置了分页,勾选“多页显示”,每页项数量设置为1,起始位1。
这样,我们中继器在遍历数据的时候,只会展示一条数据,这是因为它采用了分页,每一页只展示一张卡片。
交互动作-随机页
我们关闭中继器,接下来我们要实现点击“换一批”,中继器随机切换展示的页。
我们选中“换一批”按钮,在“交互”工具栏中新增一个“单击时”的交互,选择“设置当前显示页面”,目标为中继器,设置值为:
[[Math.ceil(10*Math.random())]]
科普一个知识点。
Math.random():产生随机数
Math.ceil(x):取整
我们使用这两个函数组合,获得了10以内的随机数。
项目预览
完成后,我们在浏览器中预览下效果。
哈哈哈,效果不错!
为了让这个项目能够公开访问,我们可以生成html文件,然后发布到gitHub或者gitee中,这样就可以将网站分享给朋友们了。
网址地址
“每日一句”网站: ricardowesley.gitee.io/onesentence
快来动手试试吧!