滑动条:拖动滑块改变进度

axure商城

生活中经常遇到需要平滑改变一个值的应用场景。比如听音乐的过程中,调节音量,又比如游戏竞猜过程中,调节竞猜数量等,这种场景最适合使用滑动条。作者将通过这篇案列分享,教大家使用Axure制作实现“滑动条:拖动滑块改变进度”

演示地址:滑动条:拖动滑块改变进度

实现效果

滑动条:拖动滑块改变进度

1、左右拖动滑块,实时显示当前进度

2、向左或向右拖动均有边界值,无法拖出边界范围

3、实时显示当前的百分比数值

原理分析

1、滑动条效果由固定长度背景 进度可见区域组成

2、拖动滑动,触发进度可见区域改变,从而显示滑动条效果

3、利用进度可见区域与背景的比例实时计算当前进度百分比

元件准备

滑动条:拖动滑块改变进度

1、一张图片,转换为动态面板,表示滑块

2、红色背景矩形元件,转换为动态面板,利用动态面板的可见范围,表示进度

3、灰色背景矩形元件,用于呈现滑块进度对比

4、一个文本矩形,默认初始文字“当前百分比:0%”,用于显示当前百分比

将进度面板里面的红色背景矩形向左移动,使矩形的右边界为0,此案例矩形宽度为300,所有向左移动300

滑动条:拖动滑块改变进度

整理元件后,最终呈现效果如下:

滑动条:拖动滑块改变进度

实现步骤

整个案例过程,只需对滑块做事件设置,即可完成滑动条效果

拖动滑块时,水平移动滑块,同时设置文字改变;

滑块在移动的过程中,设置进度面板里面的红色背景元件跟随滑块移动

滑动条:拖动滑块改变进度

下图是移动滑块的事件设置界面,注意是“水平移动”;左边界、右边界值的设置,防止拖动滑动超出范围

滑动条:拖动滑块改变进度

左侧边界值设置如下:

滑动条:拖动滑块改变进度

右侧边界值设置如下:

滑动条:拖动滑块改变进度

我们在拖动滑块时,设置文本描述元件的值,实时显示当前滑动100%进度

滑动条:拖动滑块改变进度

最后来一张跟随事件的配置截图

滑动条:拖动滑块改变进度

本案例已完成,点击QQ群“532261671”获取源文件;

更多案例请关注作者https://www.axure.com.cn/author/84633/

本文由来源 产品大神,由 十月大神 整理编辑,其版权均为 产品大神 所有,文章内容系作者个人观点,不代表 Axure中文网 对观点赞同或支持。如需转载,请注明文章来源。
12

评论:

4 条评论,访客:4 条,站长:0 条

100%好评

  • 好评:(100%)
  • 中评:(0%)
  • 差评:(0%)

最新评论

    • 十月大神
      十月大神发布于: 
      评分:

      是否有将元件转换为动态面板,动态面板具有水平滑动配置属性

    • 十月大神
      十月大神发布于: 

      这个是最简单的方法,我看你后面也发了一篇颜值的,用的也是我这个方法。为了描述清楚,截图的内容多了一点

发表评论