作者：手机用户2502892083 | 来源：互联网 | 2023-06-03 11:26
问题描述页面右下角应用CANVAS绘制环形进度条，用postion:fixed来固定他的位置。。。当页面滚动的时候绘制出来的环形图并未跟随画布移动，而是停留在原地，当下一次调用setData方法时才更
问题描述
页面右下角应用CANVAS绘制环形进度条，用postion:fixed来固定他的位置。。。当页面滚动的时候绘制出来的环形图并未跟随画布移动，而是停留在原地，当下一次调用setData方法时才更新了位置。而且最可气的是。。。开发工具上很完美，但是在真机上却很大的问题
附上WXML：
WXSS：
1
2
3
4
5
6
7
8
9
10
11
12
| .timmer {
width: 100px;
height: 100px;
position: fixed;
bottom: 30rpx;
right: -90rpx;
/* z-index: 1000; */
}
.timmerInner {
position: absolute;
} |
JS：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
| let that = this
// 设置倒计时 定时器 假设每隔100毫秒 count递增+1，当 count递增到两倍maxCount的时候刚好是一个圆环（ step 从0到2为一周），然后改变txt值并且清除定时器
this.countTimer = setInterval(() => {
if (this.data.count <= 2 * this.data.maxCount) {
// 绘制彩色圆环进度条
this.circle1.drawCircle(
'circle_draw1',
25,
2,
this.data.count / this.data.maxCount
)
this.data.count++
} else {
// clearInterval(this.countTimer)
this.circle1.drawCircle('circle_draw1', 25, 2, 301)
}
}, 50)
this.timmer = setInterval(() => {
let counttxt = that.data.counttxt - 1
if (counttxt >= 0) {
that.setData({
txt: counttxt + 'S',
counttxt
})
} else {
requestUtil.requestLoading(
'setGraphicScore?graphicId=' +
that.data.graphicId +
'&login=' +
that.data.userInfo.login,
{},
'',
function(res) {
that.setData({
txt: '+' + res.addPoint
})
wx.showToast({
title: '积分：+' + res.addPoint,
icon: 'none',
duration: 1500,
mask: false
})
setTimeout(() => {
that.setData({
isRead: true
})
}, 1500)
},
function() {}
)
clearInterval(this.timmer)
}
}, 1000)
setInterval(() => {
that.setData({})
}, 50) |
现在能面前跟上都是因为在最后加了setData()去重新渲染页面。但是还是很不跟随啊！！！
附上组件：
https://segmentfault.com/a/11...
视频演示：https://www.bilibili.com/vide...
求大神帮助！！！
京公网安备 11010802041100号