评论

如何在小程序中快速实现环形进度条(4)

同层渲染助你快速展示进度条

更新渲染api,现在支持最新的同层canvas渲染,文档已经更新,只需要更改少量参数即可使用,真香

const mprogress = new MpProgress({
  target: this, // 新增的上下文参数
  canvasId: 'progress',
  canvasSize: {width: 400, height: 400},
  barStyle: [{width: 12, fillStyle: '#f0f0f0'}, {width: 12, fillStyle: [{position: 0, color: '#56B37F'}, {position: 1, color: '#c0e674'}]}]
});
// canvas标签定义发生变化

快速安装:

npm i --save mp-progress

详细文档请戳:https://github.com/lucaszhu2zgf/mp-progress

最后一次编辑于  2020-06-15  
点赞 1
收藏
评论

1 个评论

  • 张有釜
    张有釜
    2020-06-05

    楼主 想请教一下 在同一个页面上有多个环形渲染的情况下 性能怎么样

    2020-06-05
    赞同
    回复 7
    • 文科男
      文科男
      2020-06-05
      看你有多少个,小程序自己的canvas也是需要消耗性能的,如果个数多的并且使用动画的话,会因为canvas资源消耗大而有些许卡顿
      mp-progress整体的渲染采用最原生的方式去做的,包括动画也是使用requestAnimationFrame,目的是为了保证整个动画效果最接近当前机器的刷新频率,让人有种顺滑的感觉。
      2020-06-05
      回复
    • 张有釜
      张有釜
      2020-06-06回复文科男
      多谢回答 我测了一下 创建多个canvas的方案 安卓这边肯定是不行的 6G内存 开3个就已经卡顿了 放在同一canvas效果要好一些
      2020-06-06
      回复
    • 张有釜
      张有釜
      2020-06-06
      但是 每个环形需要单独写逻辑  工作量会多一些 不能像使用组件一样
      2020-06-06
      回复
    • 文科男
      文科男
      2020-06-07回复张有釜
      看项目定位哈,有些项目需要从底层搭建项目,这种时候api的方式就会好很多
      组件的方式肯定会更简单啦
      后续版本我会提供两种调用方式
      2020-06-07
      回复
    • 文科男
      文科男
      2020-06-07回复张有釜
      小程序尽量不要使用多个canvas,因为你用一个canvas也可以做多个canvas的需求,除非布局不允许
      pc的性能就会强一些,比如一些后台监控,一个页面上有好多个图表
      2020-06-07
      回复
    查看更多(2)
登录 后发表内容