feat(NoticeBar): allow to force scrolling

This commit is contained in:
chenjiahan
2020-06-11 16:49:53 +08:00
committed by neverland
parent e49fe84afb
commit 7b0546dbba
6 changed files with 66 additions and 43 deletions
@@ -6,34 +6,39 @@ 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="transition-duration: 0s;">足协杯战线连续第2年上演广州德比战,上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
<div class="van-notice-bar__content" style="transition-duration: 0s;">在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。</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="transition-duration: 0s;">足协杯战线连续第2年上演广州德比战,上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
<div class="van-notice-bar__content" style="transition-duration: 0s;">技术是开发它的人的共同灵魂。</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="transition-duration: 0s;">在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。</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="transition-duration: 0s;">足协杯战线连续第2年上演广州德比战,上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
<div class="van-notice-bar__content" style="transition-duration: 0s;">在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。</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="transition-duration: 0s;">足协杯战线连续第2年上演广州德比战,上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
<div class="van-notice-bar__content van-ellipsis" style="transition-duration: 0s;">技术是开发它的人的共同灵魂。</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="transition-duration: 0s;">足协杯战线连续第2年上演广州德比战,上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
<div class="van-notice-bar__content van-ellipsis" style="transition-duration: 0s;">技术是开发它的人的共同灵魂。</div>
</div><i class="van-icon van-icon-arrow van-notice-bar__right-icon">
<!----></i>
</div>
@@ -42,7 +47,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="transition-duration: 0s;">足协杯战线连续第2年上演广州德比战,上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
<div class="van-notice-bar__content van-ellipsis" style="transition-duration: 0s;">技术是开发它的人的共同灵魂。</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="transition-duration: 0s;">
<div class="van-notice-bar__content van-ellipsis" style="transition-duration: 0s;">
Content
</div>
</div>Custom Right Icon</div>
@@ -11,7 +11,7 @@ exports[`icon slot 1`] = `
exports[`should not scroll when content width > wrap width 1`] = `
<div role="alert" class="van-notice-bar">
<div role="marquee" class="van-notice-bar__wrap">
<div class="van-notice-bar__content" style="transition-duration: 0s;">foo</div>
<div class="van-notice-bar__content van-ellipsis" style="transition-duration: 0s;">foo</div>
</div>
</div>
`;
@@ -19,7 +19,7 @@ exports[`should not scroll when content width > wrap width 1`] = `
exports[`should scroll when content width > wrap width 1`] = `
<div role="alert" class="van-notice-bar">
<div role="marquee" class="van-notice-bar__wrap">
<div class="van-notice-bar__content" style="transition-duration: 2s; transform: translateX(-100px);">foo</div>
<div class="van-notice-bar__content van-ellipsis" style="transition-duration: 2s; transform: translateX(-100px);">foo</div>
</div>
</div>
`;