单词竞技场小程序实战总结（5）

单词竞技场小程序实战总结（5）
3. 分数进度条组件开发
进度条在很多地方都可以用到，但是普通的进度条都是横向的，本系统需要的进度条是竖直的，因此可以封装一个竖直进度条组件。
3.1 新建进度条组件VUE文件
在components目录中，新建progress-vertical子目录，并在子目录中新建progress-vertical.vue组件文件

3.2 竖向进度条布局
进度条组件中，包含两个元素：得分文本(百分比文本)和柱状进度条。
柱状进度条分成背景和进度两部分，背景为浅色，进度为深色。

进度条的样式如下：
样式多采用Flex布局，Flex布局详见：Flex布局
进度条组件的整体样式，整体为flex竖向布局，横向居中，竖向两头对齐

进度文本样式，文本高度和行高为120rpx，剩下高度为进度条

进度条背景样式，进度条为Flex列式布局，底部对齐

进度条样式,进度条初始高度为0，背景为过渡色，边框弧度为8rpx

3.3 组件属性和内部变量
外部组件可以设置totalScore属性来设置总分，为数字类型，默认值为600，内部定义了三个变量：myScore、targetScore、timer

1.4 进度条交互脚本
该组件包括三个函数：updateScore（分数更新函数）、updateScoreByStep(单步更新函数，用于动画)、clearTimer（清除动画计时器）

进度条提供分数更新函数，用于更新进度。为了提升体验，当进度变化时，采用动画方式。更新函数如下：
该函数中，首先清空计时器，然后设置目标分数，如果目标分数跟当前分数的差值绝对值小于10，则不启用动画，否则分10次，采用动画的方式，分10次达到目标函数，每次执行间隔20毫秒，每次更新分数的函数如下：

首先计算每次更新后的分数，然后判断是否达到目标分数边界，如果达到边界则停止更新。
如果是需要增加分数，则需判断增加后的分数是否大于目标分数，如果大于等于目标分数，则将当前分数设置为目标分数，并清空计时器，停止动画。
如果是需要减少分数，则需判断减少后的分数是否小于目标分数，如果小于等于目标分数，则将当前分数设置为目标分数，并清空计时器，停止动画。
其他情况，则需要更新当前分数，继续动画。