如何在小程序中快速实现环形进度条(6)
发布于 3 年前 作者 yangming 2148 次浏览 来自 分享

在保留原有API调用方式和参数的基础上,新增组件方式引用

在项目中使用以下命令安装mp-progress

npm install mp-progress --save

在需要使用的页面中配置新增mp-progress的组件定义:

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

在页面data中定义对应的数据,config参数的使用方法和之前api调用的时候完全相同,canvasSize默认是{ width: 400, height: 400 },这种方式不同的是不需要传参数target: this,同时新增percentage(进度条的百分比):

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,.15)'}, {r: 10, fillStyle: '#56B37F'}]
  },
  percentage: 0
}

最后在页面中引入:

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

当percentage数据发生改变的时候,mp-progress的视图也会自动更新

希望新特性能更好的帮助到大家,喜欢的话给个star吧

https://github.com/lucaszhu2zgf/mp-progress

回到顶部