Blazor如何实现类似于微信的Tab切换？

云哥的美食

是否有小伙伴在使用tab的时候想进行滑动切换Tab？
并且有滑动左出左进，右出右进的效果 ，本文将讲解怎么在Blazor中去通过滑动切换Tab
本文中的UI组件使用的是MASA Blazor,您也可以是其他的UI框架，这个并不影响实际的运行效果，本文案例是兼容PC和Android的，演示效果是android中执行的，在PC中执行效果依然有效（亲测）
首先安装MASA Blazor 根据 MASA Blazor安装MASA Blazor
准备工作

• 创建 AppBar.razor文件
  
• 修改MainLayout.razor文件代码
  

1. @inherits LayoutComponentBase
3. <MApp>
4.     <AppBar>
5.         
6.             @Body
7.         
8.     </AppBar>
9. </MApp>

复制代码

• 创建 AppBar.razor.css 文件并且添加相关代码 ，以下代码是为了实现切换的时候有一个出入效果，具体代码案例来自Animista - On-Demand CSS Animations Library
  1. /*左边滑动出*/
  2. .slide-out-left {
  3.     -webkit-animation: slide-out-left 0.5s;
  4.     animation: slide-out-left 0.5s;
  5. }
  7. /*右边滑动出*/
  8. .slide-out-right {
  9.     -webkit-animation: slide-out-right 0.5s;
  10.     animation: slide-out-right 0.5s;
  11. }
  13. /*右边滑动进*/
  14. .slide-in-right {
  15.     -webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  16.     animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  17. }
  19. /*左边滑动进*/
  20. .slide-in-left {
  21.     -webkit-animation: slide-in-left 0.5s;
  22.     animation: slide-in-left 0.5s;
  23. }
  25. @-webkit-keyframes slide-out-left {
  26.     0% {
  27.         -webkit-transform: translateX(0);
  28.         transform: translateX(0);
  29.         opacity: 1;
  30.     }
  32.     100% {
  33.         -webkit-transform: translateX(-1000px);
  34.         transform: translateX(-1000px);
  35.         opacity: 0;
  36.     }
  37. }
  39. @keyframes slide-out-left {
  40.     0% {
  41.         -webkit-transform: translateX(0);
  42.         transform: translateX(0);
  43.         opacity: 1;
  44.     }
  46.     100% {
  47.         -webkit-transform: translateX(-1000px);
  48.         transform: translateX(-1000px);
  49.         opacity: 0;
  50.     }
  51. }
  54. @-webkit-keyframes slide-out-right {
  55.     0% {
  56.         -webkit-transform: translateX(0);
  57.         transform: translateX(0);
  58.         opacity: 1;
  59.     }
  61.     100% {
  62.         -webkit-transform: translateX(1000px);
  63.         transform: translateX(1000px);
  64.         opacity: 0;
  65.     }
  66. }
  68. @keyframes slide-out-right {
  69.     0% {
  70.         -webkit-transform: translateX(0);
  71.         transform: translateX(0);
  72.         opacity: 1;
  73.     }
  75.     100% {
  76.         -webkit-transform: translateX(1000px);
  77.         transform: translateX(1000px);
  78.         opacity: 0;
  79.     }
  80. }
  83. @-webkit-keyframes slide-in-left {
  84.     0% {
  85.         -webkit-transform: translateX(-1000px);
  86.         transform: translateX(-1000px);
  87.         opacity: 0;
  88.     }
  90.     100% {
  91.         -webkit-transform: translateX(0);
  92.         transform: translateX(0);
  93.         opacity: 1;
  94.     }
  95. }
  97. @keyframes slide-in-left {
  98.     0% {
  99.         -webkit-transform: translateX(-1000px);
  100.         transform: translateX(-1000px);
  101.         opacity: 0;
  102.     }
  104.     100% {
  105.         -webkit-transform: translateX(0);
  106.         transform: translateX(0);
  107.         opacity: 1;
  108.     }
  109. }
  110. @-webkit-keyframes slide-in-right {
  111.     0% {
  112.         -webkit-transform: translateX(1000px);
  113.         transform: translateX(1000px);
  114.         opacity: 0;
  115.     }
  117.     100% {
  118.         -webkit-transform: translateX(0);
  119.         transform: translateX(0);
  120.         opacity: 1;
  121.     }
  122. }
  124. @keyframes slide-in-right {
  125.     0% {
  126.         -webkit-transform: translateX(1000px);
  127.         transform: translateX(1000px);
  128.         opacity: 0;
  129.     }
  131.     100% {
  132.         -webkit-transform: translateX(0);
  133.         transform: translateX(0);
  134.         opacity: 1;
  135.     }
  136. }

  复制代码
• 创建AppBar的模型用于动态添加导航栏, 创建AppBarDto.cs文件并添加相关代码
  

1. public class AppBarDto
2. {
3.     public string Key { get; set; }
5.     /// <summary>
6.     /// 标题
7.     /// </summary>
8.     public string Title { get; init; }
10.     /// <summary>
11.     /// 图标
12.     /// </summary>
13.     public string? Icon { get; set; }
15.     /// <summary>
16.     /// 路由
17.     /// </summary>
18.     public string Href { get; init; }
20.     public AppBarDto(string title, string href, string? icon = null)
21.     {
22.         Title = title;
23.         Icon = icon;
24.         Href = href;
25.         Key = Guid.NewGuid().ToString("N");
26.     }
27. }

复制代码

• 添加相关页面，在Pages文件夹下，分别创建Index.razor,Feature.razor,Friend.razor,PersonalCenter.razor
  

文件相关代码：
Index.razor

1. @page "/"
2. <h3>Index</h3>

复制代码

Feature.razor

1. @page "/feature"
2. <h3>Feature</h3>

复制代码

Friend.razor

1. @page "/friend"
2. <h3>Friend</h3>

复制代码

PersonalCenter.razor

1. @page "/personal-center"
2. <h3>PersonalCenter</h3>

复制代码

• 修改AppBar.razor代码
  

1.     @ChildContent
4. @*这里也可以是其他组件的Tab，其实只是记录当前的导航的数据*@
5. <MTabs Centered
6.        BackgroundColor="indigo"
7.        ShowArrows="false"
8.        Value="selectModel.Key"
9.        Dark>
10.     @foreach (var i in AppBars)
11.     {
12.         <MTab Value="i.Key" OnClick="()=>GoHref(i)">
13.             @if (!string.IsNullOrEmpty(i.Icon))
14.             {
15.                 <MIcon Dark>@i.Icon</MIcon>
16.             }
17.             @i.Title
18.         </MTab>
19.     }
20. </MTabs>

复制代码

• 创建AppBar.razor.cs 添加以下代码
  

1. public partial class AppBar
2. {
3.     #region Inject
5.     [Inject]
6.     public required NavigationManager NavigationManager { get; set; }
8.     #endregion
10.     private readonly List<AppBarDto> AppBars = new();
12.     [Parameter]
13.     public RenderFragment ChildContent { get; set; }
15.     private AppBarDto selectModel;
17.     private string Class { get; set; }
19.     protected override void OnInitialized()
20.     {
21.         AppBars.Add(new AppBarDto("首页", "/", "home"));
22.         AppBars.Add(new AppBarDto("好友", "/personal-center", "mdi-account-group-outline"));
23.         AppBars.Add(new AppBarDto("功能", "/feature", "mdi-wrench"));
24.         AppBars.Add(new AppBarDto("个人中心", "/personal-center", "mdi-badge-account-alert"));
26.         // 默认选择的导航标签
27.         selectModel = AppBars[0];
29.         base.OnInitialized();
30.     }
32.     /// <summary>
33.     /// 导航栏跳转
34.     /// </summary>
35.     /// <param name="appBar"></param>
36.     private void GoHref(AppBarDto appBar)
37.     {
38.         // 防止重复点击
39.         if(appBar == selectModel)
40.         {
41.             return;
42.         }
44.         // 当点击导航的索引大于现在导航时启动滑动效果
45.         if(AppBars.IndexOf(appBar) > AppBars.IndexOf(selectModel))
46.         {
47.             Class = "slide-out-left";
48.             Task.Run(async () =>
49.             {
50.                 // 由于特效时间为0.5s 这里是等待特效完成
51.                 await Task.Delay(450);
52.                 NavigationManager.NavigateTo(selectModel.Href);
53.                 Class = "slide-in-right";
54.                 _ = InvokeAsync(StateHasChanged);
55.             });
56.         }
57.         // 当点击导航的索引小于现在导航时启动滑动效果
58.         else if (AppBars.IndexOf(appBar) < AppBars.IndexOf(selectModel))
59.         {
60.             Class = "slide-out-right";
61.             Task.Run(async () =>
62.             {
63.                 // 由于特效时间为0.5s 这里是等待特效完成
64.                 await Task.Delay(450);
65.                 NavigationManager.NavigateTo(selectModel.Href);
66.                 Class = "slide-in-left";
67.                 _ = InvokeAsync(StateHasChanged);
68.             });
69.         }
70.         selectModel = appBar;
71.         NavigationManager.NavigateTo(appBar.Href);
72.     }
75.     /// <summary>
76.     /// 开始X坐标
77.     /// </summary>
78.     private double _startX;
81.     #region 移动端滑动处理
83.     /// <summary>
84.     /// 记录开始坐标
85.     /// </summary>
86.     /// <param name="args"></param>
87.     private void TouchStart(TouchEventArgs args)
88.     {
89.         var touch = args.ChangedTouches[0];
90.         _startX = touch.ScreenX;
91.     }
93.     private void TouchEnd(TouchEventArgs args)
94.     {
95.         var touch = args.ChangedTouches[0];
96.         Switchover((decimal)touch.ScreenX);
97.     }
99.     #endregion
101.     #region PC滑动处理
103.     /// <summary>
104.     /// 记录开始坐标
105.     /// </summary>
106.     /// <param name="args"></param>
107.     private void Mousedown(MouseEventArgs args)
108.     {
109.         _startX = args.ScreenX;
110.     }
112.     private void Mouseup(MouseEventArgs args)
113.     {
114.         Switchover((decimal)args.ScreenX);
115.     }
117.     #endregion
119.     private void Switchover(decimal screenX)
120.     {
121.         var index = AppBars.IndexOf(selectModel);
122.         // 限制过度滑动
123.         if (index == AppBars.Count || index > AppBars.Count)
124.         {
125.             return;
126.         }
128.         // 设置滑动最大位限制，达到这个限制才滑动生效
129.         var size = 200;
131.         // 需要滑动200才切换 如果开始坐标x大于 当前结束的x坐标往右边切换tab
132.         if ((decimal)_startX - size > screenX)
133.         {
134.             // 如果右边往左边滑动 当前索引是当前最大数量的话不需要切换
135.             if (index == AppBars.Count - 1)
136.             {
137.                 return;
138.             }
139.             selectModel = AppBars[index + 1];
140.             Class = "slide-out-left";
142.             Task.Run(async () =>
143.             {
144.                 // 由于特效时间为0.5s 这里是等待特效完成
145.                 await Task.Delay(450);
146.                 NavigationManager.NavigateTo(selectModel.Href);
147.                 Class = "slide-in-right";
148.                 _ = InvokeAsync(StateHasChanged);
149.             });
150.         }
151.         else if ((decimal)_startX + size < screenX)
152.         {
153.             // 如果左边往右边滑动 当前索引是0的话不需要切换
154.             if (index == 0)
155.             {
156.                 return;
157.             }
158.             selectModel = AppBars[index - 1];
159.             Class = "slide-out-right";
160.             Task.Run(async () =>
161.             {
162.                 // 由于特效时间为0.5s 这里是等待特效完成
163.                 await Task.Delay(450);
164.                 NavigationManager.NavigateTo(selectModel.Href);
165.                 Class = "slide-in-left";
166.                 _ = InvokeAsync(StateHasChanged);
167.             });
168.         }
169.     }
170. }

复制代码

运行效果：

一个热爱学习的token
qq交流群：737776595
微信交流群：

来源:https://www.cnblogs.com/hejiale010426/archive/2023/01/23/17064872.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！