mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
fix(NoticeBar): scroll failed after activated
This commit is contained in:
chenjiahan
neverland
parent
ba04660ed3
commit
d21420b7d2
@ -32,7 +32,6 @@ export default createComponent({
|
||||
offset: 0,
|
||||
duration: 0,
|
||||
wrapWidth: 0,
|
||||
firstRound: true,
|
||||
contentWidth: 0,
|
||||
};
|
||||
},
|
||||
@ -45,6 +44,10 @@ export default createComponent({
|
||||
},
|
||||
},
|
||||
|
||||
activated() {
|
||||
this.start();
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClickIcon(event) {
|
||||
if (this.mode === 'closeable') {
|
||||
@ -56,7 +59,6 @@ export default createComponent({
|
||||
onTransitionEnd() {
|
||||
this.offset = this.wrapWidth;
|
||||
this.duration = 0;
|
||||
this.firstRound = false;
|
||||
|
||||
doubleRaf(() => {
|
||||
this.offset = -this.contentWidth;
|
||||
@ -66,13 +68,16 @@ export default createComponent({
|
||||
},
|
||||
|
||||
reset() {
|
||||
this.offset = 0;
|
||||
this.duration = 0;
|
||||
this.wrapWidth = 0;
|
||||
this.contentWidth = 0;
|
||||
},
|
||||
|
||||
start() {
|
||||
this.$nextTick(() => {
|
||||
this.reset();
|
||||
|
||||
setTimeout(() => {
|
||||
const { wrap, content } = this.$refs;
|
||||
if (!wrap || !content) {
|
||||
return;
|
||||
@ -82,14 +87,14 @@ export default createComponent({
|
||||
const contentWidth = content.getBoundingClientRect().width;
|
||||
|
||||
if (this.scrollable && contentWidth > wrapWidth) {
|
||||
this.offset = -contentWidth;
|
||||
this.duration = contentWidth / this.speed;
|
||||
this.wrapWidth = wrapWidth;
|
||||
this.contentWidth = contentWidth;
|
||||
} else {
|
||||
this.reset();
|
||||
doubleRaf(() => {
|
||||
this.offset = -contentWidth;
|
||||
this.duration = contentWidth / this.speed;
|
||||
this.wrapWidth = wrapWidth;
|
||||
this.contentWidth = contentWidth;
|
||||
});
|
||||
}
|
||||
});
|
||||
}, this.delay * 1000);
|
||||
},
|
||||
},
|
||||
|
||||
@ -102,8 +107,7 @@ export default createComponent({
|
||||
};
|
||||
|
||||
const contentStyle = {
|
||||
transform: `translateX(${this.offset}px)`,
|
||||
transitionDelay: (this.firstRound ? this.delay : 0) + 's',
|
||||
transform: this.offset ? `translateX(${this.offset}px)` : '',
|
||||
transitionDuration: this.duration + 's',
|
||||
};
|
||||
|
||||
|
||||
@ -6,34 +6,34 @@ exports[`renders demo correctly 1`] = `
|
||||
<div role="alert" class="van-notice-bar"><i class="van-icon van-icon-volume-o van-notice-bar__left-icon">
|
||||
<!----></i>
|
||||
<div role="marquee" class="van-notice-bar__wrap">
|
||||
<div class="van-notice-bar__content" style="transform: translateX(0px); transition-delay: 1s; transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
|
||||
<div class="van-notice-bar__content" style="transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div role="alert" class="van-notice-bar">
|
||||
<div role="marquee" class="van-notice-bar__wrap">
|
||||
<div class="van-notice-bar__content van-ellipsis" style="transform: translateX(0px); transition-delay: 1s; transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
|
||||
<div class="van-notice-bar__content van-ellipsis" style="transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div role="alert" class="van-notice-bar van-notice-bar--wrapable">
|
||||
<div role="marquee" class="van-notice-bar__wrap">
|
||||
<div class="van-notice-bar__content" style="transform: translateX(0px); transition-delay: 1s; transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
|
||||
<div class="van-notice-bar__content" style="transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div role="alert" class="van-notice-bar">
|
||||
<div role="marquee" class="van-notice-bar__wrap">
|
||||
<div class="van-notice-bar__content" style="transform: translateX(0px); transition-delay: 1s; transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
|
||||
<div class="van-notice-bar__content" style="transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
|
||||
</div><i class="van-icon van-icon-cross van-notice-bar__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
<div role="alert" class="van-notice-bar">
|
||||
<div role="marquee" class="van-notice-bar__wrap">
|
||||
<div class="van-notice-bar__content" style="transform: translateX(0px); transition-delay: 1s; transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
|
||||
<div class="van-notice-bar__content" style="transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
|
||||
</div><i class="van-icon van-icon-arrow van-notice-bar__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
@ -42,7 +42,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div role="alert" class="van-notice-bar" style="color: rgb(25, 137, 250); background: rgb(236, 249, 255);"><i class="van-icon van-icon-info-o van-notice-bar__left-icon">
|
||||
<!----></i>
|
||||
<div role="marquee" class="van-notice-bar__wrap">
|
||||
<div class="van-notice-bar__content" style="transform: translateX(0px); transition-delay: 1s; transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
|
||||
<div class="van-notice-bar__content" style="transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
exports[`icon slot 1`] = `
|
||||
<div role="alert" class="van-notice-bar">Custom Left Icon<div role="marquee" class="van-notice-bar__wrap">
|
||||
<div class="van-notice-bar__content" style="transform: translateX(0px); transition-delay: 1s; transition-duration: 0s;">
|
||||
<div class="van-notice-bar__content" style="transition-duration: 0s;">
|
||||
Content
|
||||
</div>
|
||||
</div>Custom Right Icon</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user