mp-progress 微信小程序进度条组件教程

2024-08-15 08:46:00作者：余洋婵Anita

**轻量级·高定制·微信小程序圆环进度条** —— **mp-progress**，仅7KB的超小体积，为你的小程序增添优雅的进度展现。它摒弃繁复，直击需求核心，无论是追求极致性能的小项目还是风格统一的大应用，都能灵活嵌入，无需引入庞大UI库。通过简洁的JS调用与原生Canvas操作，赋予你完全的控制权，轻松定制从色彩到动画的每一个细节。无论是直接在页面中以组件形式便捷使用，还是通过API深度集成构建个性化功能，**mp-progress**都游刃有余。全面兼容微信基础库2.7.0及以上版本，确保了技术前沿性与广泛的适用性。让你在提升用户体验的同时，保持应用的轻盈与高效。立即体验，解锁小程序界面设计的新维度！

项目地址：https://gitcode.com/gh_mirrors/mp/mp-progress

项目介绍

mp-progress 是一个专为微信小程序设计的进度条组件，提供了多种样式和动态效果，可以轻松地嵌入到你的小程序应用中，为用户的操作反馈提供直观的视觉表现。该项目的主要亮点在于其灵活性和易用性，让开发者能够快速集成并自定义以适应各种设计需求。

项目快速启动

安装

首先，你需要通过 npm 安装 mp-progress 组件：

npm install mp-progress --save

引入组件

在你的微信小程序项目中，找到需要使用进度条的页面，然后在 usingComponents 中引入 mp-progress 组件：

{
  "usingComponents": {
    "mpProgress": "mp-progress/dist/component/mp-progress"
  }
}

使用组件

在页面的 WXML 文件中，添加 mpProgress 组件：

<mpProgress config="{{config}}" percentage="{{percentage}}"></mpProgress>

在页面的 JS 文件中，初始化进度条的配置和数据：

Page({
  data: {
    config: {
      canvasSize: { width: 400, height: 400 },
      percent: 100,
      barStyle: [
        { width: 20, fillStyle: '#f0f0f0' },
        { width: 20, animate: true, fillStyle: [
          { position: 0, color: '#56B37F' },
          { position: 1, color: '#c0e674' }
        ]}
      ],
      needDot: true,
      dotStyle: [
        { r: 20, fillStyle: '#ffffff', shadow: 'rgba(0, 0, 0, 0.15)' },
        { r: 10, fillStyle: '#56B37F' }
      ]
    },
    percentage: 0
  },
  onLoad: function() {
    // 模拟进度更新
    setInterval(() => {
      this.setData({
        percentage: (this.data.percentage + 10) % 100
      });
    }, 1000);
  }
});

应用案例和最佳实践

文件上传进度

在文件上传功能中，可以使用 mp-progress 组件来显示上传进度：

<mpProgress config="{{uploadConfig}}" percentage="{{uploadPercentage}}"></mpProgress>

Page({
  data: {
    uploadConfig: {
      canvasSize: { width: 400, height: 400 },
      percent: 100,
      barStyle: [
        { width: 20, fillStyle: '#f0f0f0' },
        { width: 20, animate: true, fillStyle: [
          { position: 0, color: '#56B37F' },
          { position: 1, color: '#c0e674' }
        ]}
      ],
      needDot: true,
      dotStyle: [
        { r: 20, fillStyle: '#ffffff', shadow: 'rgba(0, 0, 0, 0.15)' },
        { r: 10, fillStyle: '#56B37F' }
      ]
    },
    uploadPercentage: 0
  },
  onUploadProgress: function(event) {
    this.setData({
      uploadPercentage: event.detail.progress
    });
  }
});

页面加载进度

在页面加载时，可以使用 mp-progress 组件来显示加载进度：

<mpProgress config="{{loadConfig}}" percentage="{{loadPercentage}}"></mpProgress>

Page({
  data: {
    loadConfig: {
      canvasSize: { width: 400, height: 400 },
      percent: 100,
      barStyle: [
        { width: 20, fillStyle: '#f0f0f0' },
        { width: 20, animate: true, fillStyle: [