用Axure动态面板制作简易抽奖小程序 – Axure中文学习网
axure商城

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

分享通过Axure动态面板实现简易抽奖程序的大概思路

一、目标

通过axure动态面板的功能,实现一个简易的抽奖程序。

二、技能要求

要求看本来的同学,需要对动态面板的功能又一个基本的掌握。如果不熟悉的话,也可以通过本文来了解一下动态面板的属性。

三、目的

技痒,想写个文分享一下,输出一下自己的思路。

四、背景

我第一篇文章发布了后,首页的文章第一的位置很快就被那个高保真抽奖的文章给挤下去了,看那篇文章在上面挂了很久,阅读量还比我的高,不太爽。看了下,人家作者是用前端代码实现的,题文不符,我就想能不能用axure实现一个差不多的效果。因此想到了动态面板,随手实现了一下。从想法到实现大概花了半小时,但是写教程可能要半天。因为码字有点费手,本落手速慢。

五、教程

原型预览链接

步骤1:新建一个原型,并新建一个页面

步骤2:拖一个手机壳模型到页面中

步骤3:拖一个动态面板到页面的手机模型中央位置

步骤4:拖一个按钮到动态面板正下方位置

图片上传失败了,后面再补充图片吧。

步骤5:双击动态面板,然后拖入一个矩形,矩形背景设置为无背景色。双击矩形,进行文字编辑,输入参与抽奖者姓名。有若干参与者,则新建面板状态,重复步骤5即可。(人太多的话就放弃这个方式吧,用别人写好的程序它不香吗?但是你也可以花时间慢慢搞,装个×也不错,想做好看点的话再加上头像什么的就更好了,这里我就不多说怎么添加头像了……)

步骤6:编辑按钮文字为“开始”,并设置交互样式,选中样式背景色为粉色

步骤7:给按钮添加单击事件,添加情形,当按钮文字为“开始”时,设置按钮文本为“停止”,且设置选中状态为“真”,并设置动态面板状态为下一项,勾上向后循环,且循环时间设置为100毫秒;当前设置完成后,点击“开始“按钮后,页面上动态面板的名字会快速滚动起来。此时为开始抽奖状态。

步骤8:继续给按钮添加情绪,当按钮文字为“停止”时,设置按钮文案为“开始”,且设置选中状态为“假”,并设置动态面板为“停止循环”;当前设置完成后,点击“停止”按钮后,页面上的动态面板滚动会停止在当前名字。此时为抽奖结束状态,显示的名字即为中奖者。

 

 

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

Axure教程:高保真滚动抽奖

2021-10-27 13:59:09

产品经理基础教程高级教程

用axure做出交互高保真原型之:文字输入超出限制输入的交互效果

2022-1-6 12:27:48

axure商城
11 条回复 A文章作者 M管理员
  1. 罗罗诺亚

    虽然写的不完全,但是对萌新很友好,手把手教学

    • 落落同学

      是的,临时起意,写的有点草率了。有经验了,下次写教程我一定深思熟虑。没写清楚的地方大家可以在评论区问我。文章写了就不能修改了。就是因为平时搜到别人的教程我自己看的都很痛苦,我才有了写教程的心思,希望能给大家带来一股清流。

    • 罗罗诺亚

      希望出多点,我这萌新需要你这种老师,挺有用的

  2. Xcc

    操作到步骤8好像不行了,单击事件只能添加一次,可以从开始变成停止,再从停止变成开始怎么实现呢?

    • 落落同学

      不好意思,写漏了。当抽奖停下来后,根据情形判断,按钮文本设置为”开始“,此情形下,单击事件为,判断情形,按钮文本为”开始“,执行设置动态面板状态,切换到下一项,时间设置为10毫秒,然后勾上向后循环。此处的动态面板设置跟步骤7一致,不同之处在于增加了文本判断的步骤。

    • 落落同学

      别忘了还有按钮的选中设置哦

  3.       141739

    你这个跟人家差的有点多啊,首先不是随机的,其次再次抽取无法去掉上一个选中人,再一个说他是用前段代码实现的?我一脸问号?

    • 陈靖

      其实不用js可以实现,不过不是用动态面板,是用中继器
      中继器数据录入人员列表,然后显示每页只显示一行。
      放一个文本框,和一个开始按钮与结束按钮,设置点击开始时,文本框显示随机整数,数字范围是1-中继器额页数,。每隔0.1秒再次触发这个事件。然后文本改变时,中继器显示对应的页数。点击停止按钮时,文本框停止重复事件,中继器显示对应的页数,显示的人员就是中奖人员。然后再把中继器这一行删除。就不会随机到重复人员了最后

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