摇一摇与简易排行榜用法说明

码小哥

载入中...

看看你能得第几名 摇动速度越均匀分值越高 在电脑上摇晃鼠标也行哦! 这次不算,重来 玩够了,开始学习 不服气,还要再玩 当读者快速摇动手机时,你的晒网作品可以捕捉到这个动作,并产生特定事件,可以通过给这些事件添加行为,实现有趣的功能。 如果读者不是通过手机浏览你的作品,也可以通过快速晃动鼠标,达到同样的效果。 摇一摇后,系统会根据读者摇晃过程中,来回速度的均匀性,给出一个百分制的成绩评分。借助这个评分,可以做出具有一定娱乐效果的小游戏,或用于摇奖等情形。

看看你能得第几名
摇动速度越均匀分值越高
在电脑上摇晃鼠标也行哦!
$(shake.score)
这次不算,重来
玩够了,开始学习
不服气,还要再玩

当读者快速摇动手机时,你的晒网作品可以捕捉到这个动作,并产生特定事件,可以通过给这些事件添加行为,实现有趣的功能。


如果读者不是通过手机浏览你的作品,也可以通过快速晃动鼠标,达到同样的效果。


摇一摇后,系统会根据读者摇晃过程中,来回速度的均匀性,给出一个百分制的成绩评分。借助这个评分,可以做出具有一定娱乐效果的小游戏,或用于摇奖等情形。

捕捉摇一摇动作

为了捕捉读者的“摇一摇”动作,你需要首先在页面内添加一个构件,然后给构件加上“摇一摇后”相关的行为。

在本文的例子中,摇一摇及排行榜相关功能都放在名为“摇动页”的那张页面里,你可以打开编辑本文参考具体做法。



在摇动页里,我们给中间那个摇动图标,添加了摇一摇后的行为,这个行为将打开摇动结果浮层,引导用户进行更多的操作。

  1. 在行为页签,点击“更多行为触发条件”
  2. 从菜单里面选择“摇一摇”后
  3. 添加上摇一摇行为后,就可以设置相应的动作了


获得摇一摇分数

如你所见,当捕捉到摇一摇动作后,通过设置相应的行为,已经可以实现常见的“摇一摇”功能了。

不过,我们还可以做得更酷一些。摇一摇后,系统会计算摇动的来回速率均匀性,计算出得分,这个得分存储在一个特殊的变量中:

shake.score


通过引用这个变量,可以做更多的事情:

比如这是你刚才的成绩(摇了后再来看) : $(shake.score)

简易排行榜

在很多情况下,我们可以在作品中,通过与读者交互,获得某些数值。例如,用勾选框做调查、测验;前面提到的“摇一摇”功能等。将这些数值你用起来做排行榜,可以有效激发读者的参与热情。


为了最大程度简化作品中添加和使用排行榜的操作,我们将相关功能整合成了一个构件,只需要插入这个构件,进行简单的设置后就可使用。

必要的准备条件
任何一个排行榜中,参与者的昵称以及用于排名的成绩是必不可少的元素。因此,你的作品中需要有这两个变量


参与者昵称

昵称可以通过让用户填写表单或其他方式获得,在本文中,摇一摇后弹出的结果浮层里面,有个文本输入表单:

你可以在合适的页面中,插入一个文本表单输入框,让你的读者填写名字。特别注意的是,需要给这个表单指定一个变量名字,以便生成排行榜时引用。
本文例子中,用户输入的昵称存储到了一个名为 nick 的变量中。

当然,要有成绩

成绩需要是个数字,这个数字可以任何通过用户互动参与的结果,比如本文的摇一摇分数。如前文所述,摇一摇的成绩存储在名为 shake.score 的变量中,后面制作排行榜时,填写这个变量名字即可。

添加排行榜构件后,它的内容页签看起来就像这样:

排行的依据是这个成绩变量,所以:
有了以上基本条件后,你就可以通过“预设”菜单等界面,添加上排行榜构件了。

打榜:记录排行成绩

当你添加的排行榜构件被显示时(翻到它所在页或浮层),排行榜构件将自动按照你前面指定的变量名字,提取出作品中当前时刻这两个变量的值,将它与排行榜内容比对,实时记录更新排行榜内容。


自定义排行榜样式

简易排行榜构件,和其他的构件使用方法相同,你可以通过设置样式,更改它的文字大小、行间距、对齐方式等。出于简化操作考虑,暂不提供对排行内容更复杂的设置。




如图所示,本文中的排行榜用背景图对排行榜进行了装饰,设置了相应的边框和文字大小。

由于是基本的构件,所以你可以自由和其他构件组合排版,做出自己风格的排行榜界面来,
排行榜显示内容

排行榜构件会自动根据它的显示尺寸大小,决定具体显示方式:


仅显示预计的排行名次

如果排行榜构件的实际显示尺寸太小,它将不显示排行榜单,而是显示当前成绩变量在排行榜中可能的名次。


例如本文中,预计名次的地方,就是将排行榜构件故意以小尺寸显示,让它自动显示出读者摇一摇后成绩在现有排行榜中的预计名次。

显示排行榜单

当然,要显示很多的内容,就需要大尺寸构件。并且由于排行榜单可能会很长(最多前100名),所以需要考虑方便读者滚动查看排行榜。


上图是本文中结果榜单的页面布局样式,其中的标题是在排行榜构件上叠加文本构件做出的效果。你可以举一反三做出更多的样式。


回到首页》