如何做显示进度的横向滑块

2024-11-17 22:21:30

1、构成元件:一个背景条(beijing),一个进度条(jindu),一个圆(yuan)(动态面板)PS:圆填充深蓝色

如何做显示进度的横向滑块如何做显示进度的横向滑块

3、为圆(动态面板)添加交互,移动当前元件,水平拖动。设置拖动边界,左侧大于等于0,右侧小于等于背景的长度。这一步是让这个圆圈在背景条上可以拖动起来。

如何做显示进度的横向滑块

5、设置进度条的尺寸,宽度为:[[yuan.x+yuan.width]],注意要添加局部变量“圆”指的是动态面板圆圈。锚点在左侧。这一步是让进度条跟着动起来。

如何做显示进度的横向滑块

7、设置圆形上的元件文字=[[Math.floor((jindu.width-30)*100/570)]],注意添加局部变量。这个是设置圆形上的文字。公式计算的是当前位置的百分比。由于本身有30宽,所以计算百分比的时候分子分母都需要减去30。不然就不是从零开始的了。Math.floor()是向下取整,也就是把小数点后面的数字抹掉,不然算出来会有长尾巴。

如何做显示进度的横向滑块

9、效果图。

如何做显示进度的横向滑块
猜你喜欢