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() {

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

@ -1,37 +1,17 @@
<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>
<script>
export default {
export default {
name: 'circle-progress',
props: {
// 圆环进度百分比值
@ -109,8 +89,8 @@ export default {
},
methods: {
//一个页面多个progress时ID需不同
randomId(){
return 'progressId'+parseInt(Math.random()*1000000)
randomId() {
return 'progressId' + parseInt(Math.random() * 1000000)
},
drawProgressBg() {
let ctx = uni.createCanvasContext(this.canvasId, this);
@ -142,22 +122,26 @@ 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);
}
}
};
};
</script>
<style scoped>
@ -167,9 +151,11 @@ export default {
align-items: center;
justify-content: center;
}
.canvas-bg {
position: absolute;
}
.canvas {
position: absolute;
}