#夏日挑战赛# HarmonyOS 实现一个基础进度条组件progress 原创

本文正在参加星光计划3.0–夏日挑战赛

前言

第一次接触HarmonyOS ，不太熟悉语法，需要反复查看文档，所以就写了一个比较简单的progress组件🐢。

效果展示

实现步骤

html

<div class="progress-wrapper">
    <div class="progress"
         @touchstart="mousedownHandler"
         @touchmove="mousemoveHandler"
         @touchend="mouseupHandler"
            >
    <!-- 进度条已划过部分 -->
        <div class="progressFinish" style="width:{{finishWidth}};">
        <!-- 滑块 -->
            <div class="slider" if="isShow"></div>
        </div>
    </div>
</div>

css

.progress-wrapper {
    width:100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.progress {
    width: 100%;
    height: 30px;
    border-radius: 20px;
    background-color: #eee;
    overflow: hidden;
    cursor: pointer;
}
.progressFinish {
    height: 100%;
    width: 0;
    border-radius: 20px;
    background: linear-gradient(to left, #ff9472, #ffc300);
    transition: 0.1s ease;
    position: relative;
}
.slider {
    height: 100%;
    width: 30px;
    border-radius: 20px;
    background-color: #ffc300;
    position: absolute;
    right: 0px;
}

js

export default {
    data: {
    // 标记滑块是否显示
        isShow: false,
        finishWidth:0
    },
// 手指刚触摸屏幕时触发该事件。
    mousedownHandler (event) {
        // 显示滑块  
        this.isShow = true
    },
// 手指触摸屏幕后移动时触发该事件
    mousemoveHandler (event) {
        // 触摸的X坐标 / 元素宽度 = 触摸距离左边的占比
        let decimal = event.touches[0].globalX / 360
        // 将左边占比转为百分数 
        let percent = decimal * 100 + '%'
        this.finishWidth = percent
    },
// 手指触摸结束离开屏幕时触发该事件。
    mouseupHandler (event) {
        // 隐藏滑块       
        this.isShow = false
    }
}

上面就是所有代码，就三个事件就实现了。使用时，只需要通过封装成组件即可，封装组件的方法可以查看官方文档，写的非常详细，这里就不过多介绍了。

当然，这个组件功能还不够完善，这里提供几个拓展思路：

• 接收进度条进度，实现初始化进度条的进度

  通过props接收一个percent，例如传入的percent:20，那么这初始化钩子函数中，将percent赋值给组件中的finishWidth，就实现了初始的进度

• 派发进度条进度，实现进度条的进度展示

  可以在手触摸屏幕事件中，将percent通过$emit()派发给父组件，父组件拿到percent可以实现很多功能，例如：展示进度条的进度、为进度条实现前进一段距离或后退一段距离等等

• 接收样式，实现自定义进度条样式

  我给进度条设置了一个初始化渐变的样式，但进度条样式肯定是根据实际业务来定制的，所以，可以设置进度条接受一些父组件提供的样式，例如：背景颜色、划过的进度背景颜色、未划过进度背景颜色、滑块颜色、长、宽、高、边框等等

📝总结

以上就是一个最基础的进度条，实现难度不大，根据这个基础组件，可以进行拓展，尽量考虑多几种组件使用需要的参数，才能算是个好的组件。

最后，由于我的水平有限🐢，并且快期末考试了，没有太多时间了解HarmonyOS语法，所以实现的就比较基础，后续如果有时间，会将拓展的功能完善😊。