更新记录

0.3.1(2024-08-30) 下载此版本

feat:添加圆角开关;添加动画显示选项

0.2.0(2024-08-16) 下载此版本

fix:添加对vue2的支持;进度条圆角

0.1.0(2024-08-01) 下载此版本

上传插件

查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.8.12 app-vue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× ×

zjq-progress

  • 基于uniapp vue3 纯CSS 的环形进度条

使用

  • 导入就行
<zjq-progress :size='400' :target='60' title='进度条' border='20' color='#00ffff'></zjq-progress>

<zjq-progress :size='400' :target='60' border='20' color='#00ffff'>
    <view>我是中间的插槽/view>
</zjq-progress>

关于vue2的使用方式

  • 自己改一下原文件的props的引用方式就行

API

Props

参数 说明 类型 默认值
target 当前进度(单位:rpx) Number 200
size 进度条尺大小(单位:rpx) String Number 200
border 进度条宽度(单位:rpx) String Number 8
color 进度条颜色 String red
title 进度条中间文字 String ``
circular 是否圆角 Boolean true
hasTransition 是否有动画 Boolean false

solt

  • 使用插槽时,会覆盖掉“title”和中间显示的百分比
  • 默认样式剧中对齐,大小和进度条大小相同

示例

    <view class="home">
    <view class="home-progress">
        环形进度条
    </view>
    <!-- 默认 -->
    <view class="item">
        <view class="item-title">
            <view>

            </view> # 默认样式<br /># target:进度,number类型<br />
            # color: 进度条颜色“string”类型,默认“red”
        </view>
        <!-- 大小(size):200rpx,进度(target):0,环形宽度(border):8rpx, -->
        <view class="item-main" style="display: flex; align-items: center; ">
            <zjq-progress :target='10'>

            </zjq-progress>
            <zjq-progress :target='60' title="进度60">

            </zjq-progress>
            <zjq-progress :target='50' color="#00ffff" title="#00ffff">

            </zjq-progress>
        </view>
    </view>
    <view class="item">
        <view class="item-title">
            <view>

            </view> # title: "环形中间"的文字;<br /># border:进度条宽度(默认值8),单位“rpx”
        </view>
        <view class="item-main" style="display: flex; align-items: center; ">

            <zjq-progress :target='10' title="默认样式">

            </zjq-progress>
            <zjq-progress :target='10' title="宽度20" :border="20">

            </zjq-progress>
        </view>
    </view>
    <view class="item">
        <view class="item-title">
            <view>

            </view> # size: 进度环的大小(默认值200),单位“rpx”
        </view>
        <view class="item-main" style="display: flex; align-items: center; ">

            <zjq-progress :target='10' title=":size='400'" size="400">

            </zjq-progress>
        </view>
    </view>

    <view class="item">
        <view class="item-title">
            <view>

            </view> # circular: 是否圆角“boolean”类型,默认“true”
        </view>
        <view class="item-main" style="display: flex; align-items: center; ">

            <zjq-progress :target='50' color="#00ffff" title="默认开启" :border="20">

            </zjq-progress>
            <zjq-progress :target='70' color="#00ffff" title="关闭圆角" :border="20" :circular="false">

            </zjq-progress>
        </view>
    </view>
    <view class="item">
        <view class="item-title">
            <view>

            </view> # 插槽演示<br/># hasTransition:是否开启动画,默认关闭
        </view>
        <view class="item-main" style="display: flex; align-items: center; ">

            <zjq-progress :size='400' :target='60' border='50' color='#00ffff'>
                <view>
                    我是中间的插槽
                </view>
            </zjq-progress>
        </view>
    </view>
</view>
    .home {
    // z-index: 10;
    height: 100%;
}

.home-progress {
    text-align: center;
    height: 80rpx;
    padding: 0 40rpx;
    line-height: 80rpx;
    border-bottom: 2px solid;
}

.item {
    margin: 20rpx;
    padding: 20rpx;
    border: 2rpx solid #eee;
    border-radius: 6rpx;

    .item-title {
        display: flex;
        min-height: 40rpx;
        height: auto;
        padding-bottom: 10rpx;

        border-bottom: 2rpx solid;

        >view {
            width: 10rpx;
            min-height: 40rpx;
            height: auto;
            background: red;
            margin-right: 20px;
        }
    }

    .item-main {
        padding: 20rpx 0;
    }
}

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问