微信小程序 MinUI 组件库系列之 progress 进度条组件

MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁、易用、高效的组件库，适用场景广，覆盖小程序原生框架、各种小程序组件主流框架等，并且提供了高效的命令行工具。MinUI 组件库包含了很多基础的组件，其中 progress 进度条组件是一个很常用的基础元件， MinUI 中 progress 组件的效果图如下：

各式各样的类型都有哦，是不是看起来很方便很快捷的样子(^_^)。可以打开微信扫一扫下面的小程序二维码先一睹为快：

微信小程序 MinUI 组件库系列之 progress 进度条组件

下面介绍 progress 组件的使用方式。

1、使用下列命令安装 Min-Cli，如已安装，请进入到下一步。Min-Cli 的文档请猛戳这里：Min-Cli使用手册

npm install -g @mindev/min-cli

2、初始化一个小程序项目。

min init my-project

选择 新建小程序 选项，即可初始化一个小程序项目。创建项目后，在编辑器中打开项目，src 目录为源码目录，dist 目录为编译后用于在微信开发者工具中指定的目录。新建的项目中已有一个 home 页面。详细文档：Min 初始化小程序项目

3、安装 progress 组件。

进入刚才新建的小程序项目的目录中：

cd my-project

安装组件：

min install @minui/wxc-progress

4、开启dev。

min dev

开启之后，修改源码后都会重新编译。

5、在页面中引入组件。

在编辑器中打开 src/pages 目录下的 home/index.wxp 文件，在 script 中添加 config 字段，配置小程序自定义组件字段，代码如下：

export default {
    config: {
        "usingComponents": {
            'wxc-progress': "@minui/wxc-progress"
        }
    }
}

wxc-progress 即为头像组件的标签名，可以在 wxml 中使用。

6、在 wxml 中使用 wxc-progress标签。

在 home/index.wxp 文件的 template 中添加 wxc-progress 标签，代码如下：

<wxc-progress percent="80"></wxc-progress>

7、打开微信开发者工具，指定 dist 目录，预览项目。

home/index.wxp 文件的代码如下所示：

<!-- home/index.wxp -->
<template>
  <wxc-progress percent="80"></wxc-progress>
</template>

<script>
export default {
  config: {
    usingComponents: {
      'wxc-progress': '@minui/wxc-progress'
    }
  },
  data: {}
}
</script>

<style>
</style>

图示：

微信小程序 MinUI 组件库系列之 progress 进度条组件

至此，minui 组件库的 progress 进度条组件在 Min 工具生成的小程序项目中的方法已介绍完毕，其他场景，在原生小程序或其他小程序框架项目中的使用方式请移步至如下链接：

在已有小程序项目中使用 MinUI 组件介绍

了解组件的使用方式后，下面开始介绍 progress 组件的 API 。

Progress【props】

属性	描述
percent	[必填] 进度百分比
stroke-width	[可选] 进度条线的宽度，单位 rpx，默认值 16
active-color	[可选] 高亮态进度条的颜色，支持纯色与线性渐变色。默认值 "#ffca49, #ffb262"。若只填一个色值，则进度条显示为该纯色值。
background-color	[可选] 进度条背景色，默认值 "#e5e5e5"
radius	[可选] 圆角角度，单位 rpx, 默认值 15

更多demo

1、设置进度条的宽度

<template>
  <wxc-progress stroke-width="20"></wxc-progress>
</template>

<script>
export default {
  config: {
    usingComponents: {
      'wxc-progress': '@minui/wxc-progress'
    }
  },
  data: {}
}
</script>

<style>
</style>

图示：

微信小程序 MinUI 组件库系列之 progress 进度条组件

2、设置进度条的前景色

<template>
  <wxc-progress percent="60" active-color="#ac89ff"></wxc-progress>
</template>

<script>
export default {
  config: {
    usingComponents: {
      'wxc-progress': '@minui/wxc-progress'
    }
  },
  data: {}
}
</script>

<style>
</style>

图示：

微信小程序 MinUI 组件库系列之 progress 进度条组件

3、设置渐变的前景色

<template>
  <wxc-progress percent="60" active-color="#ac89ff,#ff76a2"></wxc-progress>
</template>

<script>
export default {
  config: {
    usingComponents: {
      'wxc-progress': '@minui/wxc-progress'
    }
  },
  data: {}
}
</script>

<style>
</style>

图示：

微信小程序 MinUI 组件库系列之 progress 进度条组件

4、设置背景色

<template>
  <wxc-progress percent="40" background-color="#eaffea"></wxc-progress>
</template>

<script>
export default {
  config: {
    usingComponents: {
      'wxc-progress': '@minui/wxc-progress'
    }
  },
  data: {}
}
</script>

<style>
</style>

图示：

微信小程序 MinUI 组件库系列之 progress 进度条组件

5、设置圆角弧度

<template>
  <wxc-progress radius="5"></wxc-progress>
</template>

<script>
export default {
  config: {
    usingComponents: {
      'wxc-progress': '@minui/wxc-progress'
    }
  },
  data: {}
}
</script>

<style></style>

图示：

微信小程序 MinUI 组件库系列之 progress 进度条组件

更多组件更新同步请关注 MinUI 小程序组件库示例查看，或请移步到实时同步更新的微信小程序 progress 进度条组件使用文档。

沟通反馈

请添加群助手 wUf18018252882 好友或者扫码加好友，并与群助手对话发送验证码 10088 按照指引进群。

微信小程序 MinUI 组件库系列之 progress 进度条组件

相关链接

开源组件

蘑菇街前端团队，2018.01.19 于杭州

微信小程序 MinUI 组件库系列之 progress 进度条组件

相关推荐