当前位置:   article > 正文

Axure教程—计数器_axure怎么计算不同状态数量

axure怎么计算不同状态数量

本文将教大家如何用AXURE制作计数器(商品购件数的交互设计)
一、效果
在这里插入图片描述
预览地址:https://uf9ie1.axshare.com
二、功能
1、用户点击“+”号时数值加1
2、用户点击“-”号时数值减1
三、制作

  • 数值
    拖入一个矩形组件,其大小设置为164×38,在其上拖入一个文本框,命名为数值,设置默认数值为1,如图:
    在这里插入图片描述

  • 减号
    拖入一个矩形组件,命名为减,设置大小为39×36,在其矩形中加入“—”标号,放置在数值的左侧,(减号可以用文本表示也可以用图片表示)如图:
    在这里插入图片描述

  • 加号
    拖入一个矩形组件,命名为加,设置大小为39×36,在其矩形中加入“+”标号,放置在数值的右侧,(加号可以用文本表示也可以用图片表示)如图:
    在这里插入图片描述
    元件制作完毕
    四、交互
    1、减
    “减“的鼠标点击时设置 文本标签【数值】的文本为[[LVAR1-1]];如图:
    在这里插入图片描述
    在这里插入图片描述
    鼠标移入时设置选中状态为ture,如图:
    在这里插入图片描述鼠标移入出时设置选中状态为false,如图:
    在这里插入图片描述

2、加
“加“的鼠标点击时设置 文本标签【数值】的文本为[[LVAR1+1]];如图:

在这里插入图片描述
在这里插入图片描述

鼠标移入时设置选中状态为ture,如图:
在这里插入图片描述鼠标移入出时设置选中状态为false,如图:
在这里插入图片描述

3、数值
文本【数值】文本改变时,设置如图

在这里插入图片描述

获取焦点时设置选中状态为ture,如图:
在这里插入图片描述失去焦点时设置选中状态为false,如图:
在这里插入图片描述

所有制作完毕

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/很楠不爱3/article/detail/110048?site
推荐阅读
相关标签
  

闽ICP备14008679号