axure商城

Axure教程:高保真滚动抽奖

看一下这次我们想要实现的效果:

Axure教程:高保真滚动抽奖

小伙伴们可以点击这个预览链接,亲手试试吧。
(如果发现了啥BUG,还请麻烦悄悄的评论告诉我。)


看过效果之后我们再确认一下我们要实现的几个功能

  • 点击“开始抽奖”,在名单中随机抽取一位中奖人,并有闪烁切换的滚动效果。
  • 点击“再抽一次”,会开启新一轮的抽奖,并且不包含上一轮抽中的中奖人。
  • 全部人员都抽取完后,可以点击“重新开始”开启新一轮的抽奖,会重新将全部名单加载进来。

那么,我们提炼一下几个重点

  1. 人员名单,如何存放人员名单;
  2. 随机,如何实现随机抽取;
  3. 切换,如何实现在候选人之间闪烁切换;
  4. 如何实现开始切换,以及停止切换(抽中候选人);
  5. 不包含,如何排除上一轮已中奖名单;

如何存放人员名单:
使用中继器,在页面加载时,添加一个动作添加行。

如何实现随机抽取
给每个人员一个随机编码,然后进行排序,候选人的排序就被打乱了,就可以做到随机的效果。

Axure教程:高保真滚动抽奖

如何实现闪烁切换
中继器设置分页,一页仅显示一行信息,那么只要实现一定时间后翻到下一页就可以实现切换了。

Axure教程:高保真滚动抽奖

那么怎么实现循环切换呢?因为一般情况下页面翻到最后一页,就会停止了。那么我们就要在它翻到最后一页的时候再添加一个动作,就是跳到第一页,这样就可以从第一页开始继续往后翻页了。

如何实现开始抽奖和停止抽奖
翻译过来就是,怎么让中继器不停翻页,并在想要的时候停下。
那么我们就要设置一个全局变量,我给它命名为 StopOrStart,它将会有两种赋值就是start和stop。
当这个值不等于stop的时候,中继器就一直翻页。那就要考虑什么动作能一直出发翻页。这个仿佛是一个公式一样,基本就是当状态改变,当文本改变时。正好我们中继器里需要有姓名、手机号,这两样就可以用文本框,文本框就有当文本改变时的交互。另外这里很好的一个点是不同的人可能有相同的姓名,但手机号肯定不一样。所以我们在对显示手机号的文本框上添加文本改变时的交互。翻译一下就是,当显示手机号的文本框改变时,只要全局变量StopOrStart不等于Stop,就不断地翻页。

Axure教程:高保真滚动抽奖

那么让它停下来就简单了,就是让全局变量在你需要的时候让它变成是Stop就好了。我在这个原型中设置了过三秒全局变量等于Stop,那么也可以是当点击某个按钮的时候全局变量等于Stop,翻页就停止了,那么当前页就算是抽中的人选了。

那么翻页停止后,又如何启动抽奖呢?只要触发某个动作时让中继器开始翻到下一页,文本框改变了,就又会触发不停翻页了。

如何在下一轮抽奖的时候排除之前的中奖人员
再下一次抽奖之前,将当前页面的人员删除。此时手机号码的唯一性又派上用场了,删除中继器中手机号码等于当前文本框中的文本信息的行即可。


以上就是本原型的核心逻辑啦,需要下载原型的小伙伴可以点击这个预览链接查看下载链接。

给TA打赏
共{{data.count}}人
人已打赏
基础教程

Axure文本框功能使用详解

2021-8-19 16:11:51

基础教程

用Axure动态面板制作简易抽奖小程序

2021-12-21 11:25:16

axure商城
10 条回复 A文章作者 M管理员
  1. 月亮邮递员173708

    up主有啥推荐的axure系统学习的网站嘛

  2. 芒果125347

    原本想产品不用写代码,学点常用工具,coder转产品的。看到这一堆啥代码,直接吓退

    • Eliza三十

      哈哈哈哈哈,这点代码对你来说算什么。😏

    • ~141753

      这个你看过js就懂了,很简单的一个判断而已。

    • Eliza三十

      哈哈哈哈哈,是的。已经很自然语言了,比起那些机器语言,这算什么😂

  3. 小凡

    看不懂这个,怎么用代码写的?

    • TinrayYAO

      这个也不是代码吧,应该是没有汉化的Axure

    • Eliza三十

      是的,就是用axure的交互,估计就是我没汉化的原因吧。总觉得汉化过之后,有时候跑不灵,就没汉化了。

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索