更新记录

1.0.7（2023-08-28）

修复 textSize 属性 bug

1.0.6（2023-05-25）

1. 添加 titleStyle 属性
2. textOut 属性 变为 textPosition 属性

1.0.5（2023-05-11）

修复：进度值动态变化时，进度条加载卡顿的问题

平台兼容性

lx-progress-bar

lx-progress-bar 进度条组件

1. 支持单色，双色，渐变色显示
2. 文字支持外显、内显(双色进度条，文字只能内显)，可设置文字大小、颜色
3. 可设置底色
4. 可设置圆角、进度条高度、进度条最小宽度(避免内容不能展示)
5. 可选择展示百分比/数值
6. 可选择是否使用动画加载

基本用法

导入方法：

1. 直接使用 HBuilderX 导入插件
2. 下载插件 zip ,将 lx-progress-bar 文件夹复制到项目 components 文件夹中，import+components 引入。

使用方法(demo)：

    <template>
        <!-- lx-progress-bar 组件示例 -->
        <view class="container">
            <view class="container-item">
                <lx-progress-bar title="单色进度条" :total="10" :first-value="6" />
            </view>
            <view class="container-item">
                <lx-progress-bar
                    title="双色进度条"
                    :total="10"
                    :first-value="6"
                    :second-value="2"
                />
            </view>
            <view class="container-item">
                <lx-progress-bar
                    title="渐变色进度条"
                    :total="10"
                    :first-value="6"
                    content-color="linear-gradient(to right, #4cd964 , #daff20)"
                />
            </view>
            <view class="container-item">
                <lx-progress-bar
                    title="文字外显"
                    :total="10"
                    :first-value="6"
                    textPosition="outside"
                />
            </view>
            <view class="container-item">
                <lx-progress-bar
                    title="自定义文字"
                    :total="10"
                    :first-value="6"
                    text-color="#ffffff"
                    text-size="16px"
                />
            </view>
            <view class="container-item">
                <lx-progress-bar
                    title="设置圆角,高度,最小宽度"
                    :total="10"
                    :first-value="0.1"
                    bar-radius="5vw"
                    bar-height="8vw"
                    min-width="10vw"
                />
            </view>
            <view class="container-item">
                <lx-progress-bar
                    title="百分比展示,可设置展示几位小数"
                    :total="10"
                    :first-value="6"
                    percentum
                    precision="1"
                />
            </view>
            <view class="container-item">
                <lx-progress-bar
                    title="自定义标题"
                    titleStyle="font-size:5vw; color: #007aff;"
                    :total="10"
                    :first-value="6"
                />
            </view>
            <view class="container-item">
                <lx-progress-bar
                    title="动画加载"
                    :total="10"
                    :first-value="6"
                    animation
                />
            </view>
        </view>
    </template>

    <script>
    export default {};
    </script>

    <style lang="scss" scoped>
    .container {
        padding: 0 4vw;

        &-item {
            margin: 3vw 0;
        }
    }
    </style>

Attributes and Events