进度条

1 案例描述

1.1 场景描述

进度条,从0到100逐渐增长,上方显示百分比。

1.2 思路分析

1)进度条,就是一个有填充颜色的矩形在另一个无填充的矩形中不断拉伸,直到两者重合。

2)百分比即为两者长度之比,向上取整。

1.3 元件准备(如图1)

1)一个375*20的矩形,无填充颜色,命名为“Kuang”。

2)一个1*20的矩形,填充颜色为红,命名为“Jin du tiao”,放置在“Kuang”的最左侧。

3)一个文本标签,放置在“Kuang”的上方,设为隐藏。

图1

2 用例

2.1 设置“Jin du tiao”的“载入时”用例(如图2)

1)双击“载入时”,再点击“设置尺寸”。

2)设置锚点为“左侧“,动画为”线性“,时间为“5000”毫秒。

3)设置“宽”的函数,使局部变量LVAR1为“元件”、“Kuang”,英文输入状态下,插入函数:[[LVAR1.width]]。

图2

2.2 设置“Bai fen bi”的“载入时”和“显示时”用例(如图3、图4)

1)载入时:显示“Bai fen bi”

2)显示时:设置文本,值为“[[Math.ceil(LVAR1.width/LVAR2.width*100)]]%”;等待0毫秒;隐藏“Bai fen bi”;显示“Bai fen bi”。

图3
图4

2.3 点击“预览“察看效果。

推荐阅读更多精彩内容