From a0270ac24c8acb36c601497f4465ad21579993f5 Mon Sep 17 00:00:00 2001 From: Symin Date: Tue, 22 Apr 2025 16:28:01 +0800 Subject: [PATCH 1/6] =?UTF-8?q?feat(Scroll):=20=E6=B7=BB=E5=8A=A0=E5=B9=B3?= =?UTF-8?q?=E6=BB=91=E6=BB=9A=E5=8A=A8=E5=88=B0=E5=BA=95=E9=83=A8=E7=9A=84?= =?UTF-8?q?=E5=8A=9F=E8=83=BD=EF=BC=8C=E7=94=A8=E4=BA=8E=E8=81=8A=E5=A4=A9?= =?UTF-8?q?=E6=A1=86=E5=92=8C=E5=8A=A8=E6=80=81=E6=9D=A1=E7=9B=AE=E5=B1=95?= =?UTF-8?q?=E7=A4=BA=E7=AD=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Samples/Scrolls.razor | 15 ++++++++--- .../Components/Samples/Scrolls.razor.cs | 11 ++++++++ src/BootstrapBlazor.Server/Locales/en-US.json | 3 ++- src/BootstrapBlazor.Server/Locales/zh-CN.json | 3 ++- .../Components/Scroll/Scroll.razor | 5 ++-- .../Components/Scroll/Scroll.razor.cs | 8 ++++++ .../Components/Scroll/Scroll.razor.js | 27 +++++++++++++++++++ 7 files changed, 65 insertions(+), 7 deletions(-) create mode 100644 src/BootstrapBlazor/Components/Scroll/Scroll.razor.js diff --git a/src/BootstrapBlazor.Server/Components/Samples/Scrolls.razor b/src/BootstrapBlazor.Server/Components/Samples/Scrolls.razor index bb0a0e4d497..e82efe2d8ec 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Scrolls.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/Scrolls.razor @@ -9,10 +9,19 @@
- -
@Localizer["ScrollNormalDescription"]
-
@Localizer["ScrollNormalBottom"]
+ +
@Localizer["ScrollNormalDescription"]
+
+
+
+
+
+
@Localizer["ScrollNormalBottom"]
 + +
+ +
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Scrolls.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Scrolls.razor.cs index bb9955d848a..b27f8db445c 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Scrolls.razor.cs +++ b/src/BootstrapBlazor.Server/Components/Samples/Scrolls.razor.cs @@ -33,4 +33,15 @@ private AttributeItem[] GetAttributes() => DefaultValue = " — " } ]; + + private Scroll? _scroll; + + private async Task ScrollToBottom() + { + if (_scroll != null) + { + await _scroll.ScrollToBottom(); + } + + } } diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json index b0a740221e1..2cce97820e4 100644 --- a/src/BootstrapBlazor.Server/Locales/en-US.json +++ b/src/BootstrapBlazor.Server/Locales/en-US.json @@ -1335,8 +1335,9 @@ "ScrollTitle": "Scroll", "ScrollDescription": "Add scroll bars to components whose height or width exceeds the standard", "ScrollTips": "The scroll bar can be rendered only when its element has a fixed height. Its height attribute can be set through the coat element", + "ScrollToBottom": "Scroll to bottom", "ScrollNormalTitle": "Common usage", - "ScrollNormalIntro": "Add a scroll bar to the component. By setting the height of Height to 200px, the scroll bar appears when the height of the inner child element is 400px", + "ScrollNormalIntro": "Add a scroll bar to the component. By setting the height of Height to 200px, the scroll bar appears when the height of the inner child element is 500px", "Desc1": "Subassembly", "Desc2": "Component height", "ScrollNormalDescription": "Please scroll the scroll bar on the right", diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json index 2fc69848e37..28692348b43 100644 --- a/src/BootstrapBlazor.Server/Locales/zh-CN.json +++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json @@ -1335,8 +1335,9 @@ "ScrollTitle": "Scroll 滚动条", "ScrollDescription": "给高度或者宽度超标的组件增加滚动条", "ScrollTips": "其元素必须拥有固定高度时才可呈现滚动条，可以通过外套元素设置其 height 属性", + "ScrollToBottom": "滚动到底部", "ScrollNormalTitle": "普通用法", - "ScrollNormalIntro": "给组件增加滚动条，通过设置 Height 高度值为 200px 使内部子元素高度为 400px 时出现滚动条", + "ScrollNormalIntro": "给组件增加滚动条，通过设置 Height 高度值为 200px 使内部子元素高度为 500px 时出现滚动条", "Desc1": "子组件", "Desc2": "组件高度", "ScrollNormalDescription": "请滚动右侧滚动条", diff --git a/src/BootstrapBlazor/Components/Scroll/Scroll.razor b/src/BootstrapBlazor/Components/Scroll/Scroll.razor index 470a443dc9e..2f18771e7b6 100644 --- a/src/BootstrapBlazor/Components/Scroll/Scroll.razor +++ b/src/BootstrapBlazor/Components/Scroll/Scroll.razor @@ -1,6 +1,7 @@ @namespace BootstrapBlazor.Components -@inherits BootstrapComponentBase +@inherits BootstrapModuleComponentBase +@attribute [BootstrapModuleAutoLoader(AutoInvokeDispose = false)] -
+
@ChildContent
diff --git a/src/BootstrapBlazor/Components/Scroll/Scroll.razor.cs b/src/BootstrapBlazor/Components/Scroll/Scroll.razor.cs index 38270b46b62..6d43e4cbea6 100644 --- a/src/BootstrapBlazor/Components/Scroll/Scroll.razor.cs +++ b/src/BootstrapBlazor/Components/Scroll/Scroll.razor.cs @@ -59,4 +59,12 @@ public partial class Scroll [Inject] [NotNull] private IOptionsMonitor? Options { get; set; } + + /// + /// 滚动到底部 + /// + public async Task ScrollToBottom() + { + await InvokeVoidAsync("scrollToBottom", Id); + } } diff --git a/src/BootstrapBlazor/Components/Scroll/Scroll.razor.js b/src/BootstrapBlazor/Components/Scroll/Scroll.razor.js new file mode 100644 index 00000000000..d8e222629bb --- /dev/null +++ b/src/BootstrapBlazor/Components/Scroll/Scroll.razor.js @@ -0,0 +1,27 @@ +export function scrollToBottom(id) { + let el = document.getElementById(id); + const start = el.scrollTop; + const end = el.scrollHeight; + const distance = end - start; + const duration = 500; // 动画持续时间（毫秒） + const startTime = performance.now(); + + function scrollStep(currentTime) { + const elapsed = currentTime - startTime; + const progress = Math.min(elapsed / duration, 1); // 确保进度不超过1 + el.scrollTop = start + distance * progress; + + if (progress < 1) { + window.requestAnimationFrame(scrollStep); + } + } + + window.requestAnimationFrame(scrollStep); +} + +export function init(id) { + const el = document.getElementById(id) + if (el === null) { + + } +} From cbd009ee787e7b97768321fe4cb010ca736c8c1a Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Tue, 22 Apr 2025 18:45:51 +0800 Subject: [PATCH 2/6] =?UTF-8?q?refactor:=20=E7=B2=BE=E7=AE=80=E4=BB=A3?= =?UTF-8?q?=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Scroll/Scroll.razor.cs | 5 +-- .../Components/Scroll/Scroll.razor.js | 33 +++++++------------ 2 files changed, 12 insertions(+), 26 deletions(-) diff --git a/src/BootstrapBlazor/Components/Scroll/Scroll.razor.cs b/src/BootstrapBlazor/Components/Scroll/Scroll.razor.cs index 6d43e4cbea6..c460d02ca27 100644 --- a/src/BootstrapBlazor/Components/Scroll/Scroll.razor.cs +++ b/src/BootstrapBlazor/Components/Scroll/Scroll.razor.cs @@ -63,8 +63,5 @@ public partial class Scroll /// /// 滚动到底部 /// - public async Task ScrollToBottom() - { - await InvokeVoidAsync("scrollToBottom", Id); - } + public Task ScrollToBottom() => InvokeVoidAsync("scrollToBottom", Id); } diff --git a/src/BootstrapBlazor/Components/Scroll/Scroll.razor.js b/src/BootstrapBlazor/Components/Scroll/Scroll.razor.js index d8e222629bb..7bf98ddba31 100644 --- a/src/BootstrapBlazor/Components/Scroll/Scroll.razor.js +++ b/src/BootstrapBlazor/Components/Scroll/Scroll.razor.js @@ -1,27 +1,16 @@ -export function scrollToBottom(id) { - let el = document.getElementById(id); - const start = el.scrollTop; - const end = el.scrollHeight; - const distance = end - start; - const duration = 500; // 动画持续时间（毫秒） - const startTime = performance.now(); - - function scrollStep(currentTime) { - const elapsed = currentTime - startTime; - const progress = Math.min(elapsed / duration, 1); // 确保进度不超过1 - el.scrollTop = start + distance * progress; - - if (progress < 1) { - window.requestAnimationFrame(scrollStep); - } - } - - window.requestAnimationFrame(scrollStep); -} - -export function init(id) { +export function init(id) { const el = document.getElementById(id) if (el === null) { } } + +export function scrollToBottom(id) { + const el = document.getElementById(id); + const top = el.scrollHeight; + el.scrollTo({ + top, + left: 0, + behavior: "smooth" + }); +} From 81bd92796fd277e7933974a671dcbaa3a85e2a48 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Tue, 22 Apr 2025 18:46:01 +0800 Subject: [PATCH 3/6] =?UTF-8?q?doc:=20=E7=B2=BE=E7=AE=80=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Samples/Scrolls.razor | 10 +++++----- .../Components/Samples/Scrolls.razor.cs | 12 +++--------- 2 files changed, 8 insertions(+), 14 deletions(-) diff --git a/src/BootstrapBlazor.Server/Components/Samples/Scrolls.razor b/src/BootstrapBlazor.Server/Components/Samples/Scrolls.razor index e82efe2d8ec..9667be9c71f 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Scrolls.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/Scrolls.razor @@ -11,11 +11,11 @@
@Localizer["ScrollNormalDescription"]
-
-
-
-
-
+
+
+
+
+
@Localizer["ScrollNormalBottom"]
 diff --git a/src/BootstrapBlazor.Server/Components/Samples/Scrolls.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Scrolls.razor.cs index b27f8db445c..c1367d65615 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Scrolls.razor.cs +++ b/src/BootstrapBlazor.Server/Components/Samples/Scrolls.razor.cs @@ -34,14 +34,8 @@ private AttributeItem[] GetAttributes() => } ]; - private Scroll? _scroll; + [NotNull] + private Scroll? _scroll = null; - private async Task ScrollToBottom() - { - if (_scroll != null) - { - await _scroll.ScrollToBottom(); - } - - } + private Task ScrollToBottom() => _scroll.ScrollToBottom(); } From 0ab572a413868ed16397b797369e0d2b34366d17 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Tue, 22 Apr 2025 18:49:28 +0800 Subject: [PATCH 4/6] =?UTF-8?q?refactor:=20=E7=A7=BB=E9=99=A4=20init=20?= =?UTF-8?q?=E8=B0=83=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor/Components/Scroll/Scroll.razor | 2 +- src/BootstrapBlazor/Components/Scroll/Scroll.razor.js | 9 +-------- 2 files changed, 2 insertions(+), 9 deletions(-) diff --git a/src/BootstrapBlazor/Components/Scroll/Scroll.razor b/src/BootstrapBlazor/Components/Scroll/Scroll.razor index 2f18771e7b6..48aa041b72e 100644 --- a/src/BootstrapBlazor/Components/Scroll/Scroll.razor +++ b/src/BootstrapBlazor/Components/Scroll/Scroll.razor @@ -1,6 +1,6 @@ @namespace BootstrapBlazor.Components @inherits BootstrapModuleComponentBase -@attribute [BootstrapModuleAutoLoader(AutoInvokeDispose = false)] +@attribute [BootstrapModuleAutoLoader(AutoInvokeInit = false, AutoInvokeDispose = false)]
@ChildContent diff --git a/src/BootstrapBlazor/Components/Scroll/Scroll.razor.js b/src/BootstrapBlazor/Components/Scroll/Scroll.razor.js index 7bf98ddba31..652aac0461e 100644 --- a/src/BootstrapBlazor/Components/Scroll/Scroll.razor.js +++ b/src/BootstrapBlazor/Components/Scroll/Scroll.razor.js @@ -1,11 +1,4 @@ -export function init(id) { - const el = document.getElementById(id) - if (el === null) { - - } -} - -export function scrollToBottom(id) { +export function scrollToBottom(id) { const el = document.getElementById(id); const top = el.scrollHeight; el.scrollTo({ From ff68ad3f8a7556e6c3d92cb65770eb4bc3643fc8 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Tue, 22 Apr 2025 19:05:03 +0800 Subject: [PATCH 5/6] =?UTF-8?q?test:=20=E5=A2=9E=E5=8A=A0=E5=8D=95?= =?UTF-8?q?=E5=85=83=E6=B5=8B=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- test/UnitTest/Components/ScrollTest.cs | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/test/UnitTest/Components/ScrollTest.cs b/test/UnitTest/Components/ScrollTest.cs index 9a25ad512ac..fdd75e6ec73 100644 --- a/test/UnitTest/Components/ScrollTest.cs +++ b/test/UnitTest/Components/ScrollTest.cs @@ -59,4 +59,17 @@ public void ChildContent_Ok() Assert.Contains("I am scroll", cut.Markup); } + + [Fact] + public async Task ScrollToBottom_Ok() + { + var cut = Context.RenderComponent(builder => builder.Add(a => a.ChildContent, r => + { + r.OpenElement(0, "div"); + r.AddContent(1, "I am scroll"); + r.CloseComponent(); + })); + + await cut.InvokeAsync(() => cut.Instance.ScrollToBottom()); + } } From 5fcaaec1486dad145370513ee789c619fb388c2d Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Tue, 22 Apr 2025 19:09:23 +0800 Subject: [PATCH 6/6] =?UTF-8?q?test:=20=E6=9B=B4=E6=96=B0=E5=8D=95?= =?UTF-8?q?=E5=85=83=E6=B5=8B=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- test/UnitTest/Components/ScrollTest.cs | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/test/UnitTest/Components/ScrollTest.cs b/test/UnitTest/Components/ScrollTest.cs index fdd75e6ec73..d7f05bc549f 100644 --- a/test/UnitTest/Components/ScrollTest.cs +++ b/test/UnitTest/Components/ScrollTest.cs @@ -5,7 +5,7 @@ namespace UnitTest.Components; -public class ScrollTest : TestBase +public class ScrollTest : BootstrapBlazorTestBase { [Fact] public void Height_Ok() @@ -31,20 +31,20 @@ public void ScrollWidth_Ok() builder.Add(a => a.Width, "500px"); }); - Assert.Equal("
", cut.Markup); + Assert.Contains("style=\"width: 500px; --bb-scroll-width: 5px; --bb-scroll-hover-width: 5px;\"", cut.Markup); cut.SetParametersAndRender(builder => { builder.Add(a => a.ScrollWidth, 6); }); - Assert.Equal("
", cut.Markup); + Assert.Contains("style=\"width: 500px; --bb-scroll-width: 6px; --bb-scroll-hover-width: 5px;\"", cut.Markup); cut.SetParametersAndRender(builder => { builder.Add(a => a.ScrollWidth, 6); builder.Add(a => a.ScrollHoverWidth, 12); }); - Assert.Equal("
", cut.Markup); + Assert.Contains("style=\"width: 500px; --bb-scroll-width: 6px; --bb-scroll-hover-width: 12px;\"", cut.Markup); } [Fact]