更新记录

1.0.4（2025-07-11） 下载此版本

修复存在空白区域的bug

1.0.3（2025-07-11） 下载此版本

无

1.0.2（2025-07-11） 下载此版本

修复bug，使其兼容H5和APP端

平台兼容性

uni-app

其他

hy-grid-progress 栅格式进度

描述

可自定义颜色、栅格数、间隙、高度、是否需要边框

仅测试于 vue2, H5. 其他平台可自行测试

使用方法

导入 `uni_modules` 后直接使用即可

<template>
    <view class="container">
        <hy-grid-progress :process="progress"></hy-grid-progress>

        <hy-grid-progress :process="progress" beginColor="#f3a73f" endColor="#fdedd9" style="margin-top: 30px;"></hy-grid-progress>

        <hy-grid-progress :process="progress" beginColor="#e43d33" endColor="#fad8d6" style="margin-top: 30px;"></hy-grid-progress>

        <slider :value="progress" @change="onSliderChange" show-value />
    </view>
</template>

<script>
    export default {

        data() {
            return {
                progress: 50
            };
        },
        methods: {
            onSliderChange(e) {
                this.progress = e.detail.value
            },
        }
    }
</script>

<style lang="scss">
    .container {
        height: 100vh;
        background-color: #ffffff;
        padding: 30px;
    }
</style>

参数说明