增加触底加载LoadMore

Author: nhren

.gitignore

@@ -384,3 +384,5 @@ src/**/wwwroot/**/uploader
 
 # Bootstrap
 **/BootstrapBlazor/wwwroot/js/bootstrap.blazor.bundle.min.js
+/src/BootstrapBlazor/compilerconfig.json
+/src/BootstrapBlazor/compilerconfig.json.defaults

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -10,11 +10,13 @@
   </ItemGroup>
 
   <ItemGroup>
+    <Content Remove="compilerconfig.json" />
     <Content Remove="sasscompiler.json" />
     <Content Remove="wwwroot\core\**\*.*" />
     <Content Remove="wwwroot\lib\**\*.css" />
     <Content Remove="wwwroot\scss\**\*.*" />
     <Content Remove="wwwroot\src\**\*.*" />
+    <None Include="compilerconfig.json" />
     <None Include="sasscompiler.json" />
     <None Include="wwwroot\core\**\*.*" />
     <None Include="wwwroot\lib\**\*.css" />

src/BootstrapBlazor/Components/LoadMore/LoadMore.razor

@@ -0,0 +1,43 @@
+<IntersectionObserver OnIntersecting="OnIntersecting" Threshold="1" AutoUnobserveWhenIntersection="false" UseElementViewport="true">
+    <IntersectionObserverItem>
+        @if(NumOfCurrentPage < PageSize)
+        {
+            <div class="nomore">@NoMoreText</div>
+        }
+        else
+        {
+            <div class="loading">
+                <Spinner></Spinner>
+            </div>
+        }
+    </IntersectionObserverItem>
+</IntersectionObserver>
+
+@code {
+    /// <summary>
+    /// 触底时加载的调用
+    /// </summary>
+    [Parameter] public Func<Task>? OnLoadMore { get; set; }
+    /// <summary>
+    /// 当前页加载的记录数
+    /// </summary>
+    [Parameter] public int NumOfCurrentPage{ get; set; }
+    /// <summary>
+    /// 分页大小
+    /// </summary>
+    [Parameter] public int PageSize { get; set; }
+    /// <summary>
+    /// 没有更多时显示的文字
+    /// </summary>
+    [Parameter] public string NoMoreText { get; set; } = "没有更多了";
+    /// <summary>
+    /// 触底时加载的调用
+    /// </summary>
+    async Task OnIntersecting( IntersectionObserverEntry entry )
+    {
+        if(entry.IsIntersecting)
+        {
+            if(OnLoadMore != null) await OnLoadMore.Invoke();
+        }
+    }
+}

src/BootstrapBlazor/Components/LoadMore/LoadMore.razor.css

@@ -0,0 +1,14 @@
+.nomore {
+  display: flex;
+  justify-content: center;
+  padding: 0.5rem 0.5rem 1rem;
+  color: #aaa;
+  font-size: 0.875rem;
+}
+
+.loading {
+  display: flex;
+  justify-content: center;
+  padding: 0.5rem 0.5rem 1rem;
+  color: #aaa;
+}

src/BootstrapBlazor/Components/LoadMore/LoadMore.razor.min.css

@@ -0,0 +1,14 @@
+.nomore {
+    display: flex;
+    justify-content: center;
+    padding: .5rem .5rem 1rem;
+    color: #aaa;
+    font-size: .875rem;
+}
+
+.loading {
+    display: flex;
+    justify-content: center;
+    padding: .5rem .5rem 1rem;
+    color: #aaa;
+}