chen
/
flying-monkey
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

取消我的页面圆形进度条的动画效果，原因：App动画时会抖动

master
chen 2022-04-02 09:42:53 +08:00
parent 476de6e246
commit fe4b5e8c85
2 changed files with 146 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
App.vue
View File

@ -10,14 +10,14 @@
onLaunch: function() {
// 配置全局域名
// #ifdef APP-PLUS
getApp().globalData.hostapi = 'https://7and5.cn';
this.globalData.hostapi = 'https://7and5.cn';
// #endif
// #ifdef MP-WEIXIN
this.globalData.hostapi = 'https://7and5.cn';
// #endif
// #ifdef H5
// uni.setStorageSync('hostapi','/web');
getApp().globalData.hostapi = '/web';
this.globalData.hostapi = 'https://7and5.cn';
// this.globalData.hostapi = '/web';
// #endif
},
onShow: function() {

56
components/ar-circle-progress/index.vue
View File

@ -1,31 +1,11 @@
<template>
<view
class="circle-progress"
:style="{
width: widthPx + 'px',
height: widthPx + 'px',
backgroundColor: bgColor
}"
>
<view class="circle-progress"
:style="{width: widthPx + 'px',height: widthPx + 'px',backgroundColor: bgColor}">
<!-- 有的不支持canvas-id属性，必须用id属性 -->
<canvas v-if="canvasId"
class="canvas-bg"
:canvas-id="canvasId"
:id="canvasId"
:style="{
width: widthPx + 'px',
height: widthPx + 'px'
}"
></canvas>
<canvas v-if="elId"
class="canvas"
:canvas-id="elId"
:id="elId"
:style="{
width: widthPx + 'px',
height: widthPx + 'px'
}"
></canvas>
<canvas v-if="canvasId" class="canvas-bg" :canvas-id="canvasId" :id="canvasId"
:style="{width: widthPx + 'px',height: widthPx + 'px'}"></canvas>
<canvas v-if="elId" class="canvas" :canvas-id="elId" :id="elId"
:style="{width: widthPx + 'px',height: widthPx + 'px'}"></canvas>
<slot></slot>
</view>
</template>
@ -142,19 +122,23 @@ export default {
ctx.arc(radius, radius, radius - this.borderWidthPx, this.startAngle, endAngle, false);
ctx.stroke();
ctx.draw();
// 有动画
// 增大了百分比
if (this.newPercent > this.oldPercent) {
progress++;
if (progress > this.newPercent) return;
} else {
// 减少百分比
progress--;
if (progress < this.newPercent) return;
}
// if (this.newPercent > this.oldPercent) {
// progress++;
// if (progress > this.newPercent) return;
// } else {
// // 减少百分比
// progress--;
// if (progress < this.newPercent) return;
// }
// 无动画
progress = this.newPercent;
setTimeout(() => {
// 定时器，为了让进度条有动画效果
this.drawCircleByProgress(progress);
}, time);
// }, time);
}, 0);
}
}
};
@ -167,9 +151,11 @@ export default {
align-items: center;
justify-content: center;
}
.canvas-bg {
position: absolute;
}
.canvas {
position: absolute;
}