小楼axure rp教程(二)数字调节效果

AxureRP6.5教程 小楼一夜听春语 15833℃ 0评论

小楼axure rp教程(二)数字调节效果

示例原型:点击这里下载

实现目标:

1、  点击上箭头数字增加

2、  点击下箭头数字减少

最终效果如下:

gaollg0

这里用到了变量,当然用变量是一种实现方式,动态面板也能实现类似效果,只是不能够无限加减。

实现过程:

1、  需要的组件:文本框1个,矩形2个

2、  将文本框文字改为1,标签起个名字比如叫…文本框(图1)

1

3、  把矩形变成三角形:选择矩形点右键—编辑选项—选择形状—选择向上三角形;另外一个矩形选择向下三角形。(图2)

2

4、  设置矩形大小,在这里我设置成12*12(图3)然后按照效果图摆好位置。

3

5、开始设置两个三角形的点击事件(onclick)。

向上的设置成:点击时文本框的文字=文本框文字+1(图4)

4

向下的设置成:如果文本框文字大于0,则文本框的文字=文本框文字-1。与上面三角形不同的是需要设置一个条件(图5)。

5

小技巧:复制向上三角形的用例,粘贴到向下三角形的onclick中,双击打开后把+1直接改成-1(图6)

6

好了,生成原型就能看到想要的效果了。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师全新打造Axure RP 9精品课程,以独有的教学方法与技巧,帮助你以最短的时间高效的完成学习目标。

《Axure RP 9 萌新修炼视频》-----从零入门进阶的优质课程------【点此查看详情】


转载请注明:Axure原创教程网 » 小楼axure rp教程(二)数字调节效果

喜欢 (1)or分享 (0)

您必须 登录 才能发表评论!

(3)个小伙伴在吐槽
  1. 头像
    小楼,请教一下文中demo的动态图是怎么实现的?谢谢
    Whiskin2013-09-15 13:47
    • 头像
      录屏生成gif的软件,百度很多!
      小楼一夜听春语2013-09-16 09:26
  2. 头像
    小楼老师哦,那个范围滑动选择显示数字怎么做啊
    宝宝2016-04-18 10:40