Skip to content

Commit

Permalink
fix(notice-bar): fixe inconsistent rolling rates (#5910)
Browse files Browse the repository at this point in the history
  • Loading branch information
landluck authored Oct 14, 2024
1 parent d25ded5 commit dc5f1f2
Showing 1 changed file with 24 additions and 14 deletions.
38 changes: 24 additions & 14 deletions packages/notice-bar/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ VantComponent({
getRect(this, '.van-notice-bar__wrap'),
]).then((rects) => {
const [contentRect, wrapRect] = rects;
const { speed, scrollable, delay } = this.data;
const { scrollable } = this.data;
if (
contentRect == null ||
wrapRect == null ||
Expand All @@ -79,24 +79,32 @@ VantComponent({
}

if (scrollable || wrapRect.width < contentRect.width) {
const duration =
((wrapRect.width + contentRect.width) / speed) * 1000;

this.wrapWidth = wrapRect.width;
this.contentWidth = contentRect.width;
this.duration = duration;
this.animation = wx.createAnimation({
duration,
timingFunction: 'linear',
delay,
});
this.initAnimation(wrapRect.width, contentRect.width);

this.scroll(true);
}
});
});
},

initAnimation(warpWidth: number, contentWidth: number) {
const { speed, delay } = this.data;

this.wrapWidth = warpWidth;
this.contentWidth = contentWidth;

// begin 0
this.contentDuration = (contentWidth / speed) * 1000;
// begin -wrapWidth
this.duration = ((warpWidth + contentWidth) / speed) * 1000;

this.animation = wx.createAnimation({
duration: this.contentDuration,
timingFunction: 'linear',
delay,
});
},

scroll(isInit = false) {
this.timer && clearTimeout(this.timer);
this.timer = null;
Expand All @@ -108,18 +116,20 @@ VantComponent({
.export(),
});

const duration = isInit ? this.contentDuration : this.duration;

requestAnimationFrame(() => {
this.setData({
animationData: this.animation
.translateX(-this.contentWidth)
.step()
.step({ duration })
.export(),
});
});

this.timer = setTimeout(() => {
this.scroll();
}, this.duration + this.data.delay);
}, duration + this.data.delay);
},

onClickIcon(event) {
Expand Down

0 comments on commit dc5f1f2

Please sign in to comment.