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

发布于 2022-6-28 12:13
浏览
2收藏

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

前言

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

效果展示

#夏日挑战赛# 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语法,所以实现的就比较基础,后续如果有时间,会将拓展的功能完善😊。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2022-6-28 23:22:33修改
6
收藏 2
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐