经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 移动开发 » 微信开发 » 查看文章
Blazor如何实现类似于微信的Tab切换？
来源：cnblogs　　作者：tokengo　　时间：2023/1/28 8:46:12　　对本文有异议

是否有小伙伴在使用tab的时候想进行滑动切换Tab？

并且有滑动左出左进，右出右进的效果 ，本文将讲解怎么在Blazor中去通过滑动切换Tab

本文中的UI组件使用的是MASA Blazor,您也可以是其他的UI框架，这个并不影响实际的运行效果，本文案例是兼容PC和Android的，演示效果是android中执行的，在PC中执行效果依然有效（亲测）

首先安装MASA Blazor 根据 MASA Blazor安装MASA Blazor

准备工作

  1. 创建 AppBar.razor文件

  2. 修改MainLayout.razor文件代码

  1. @inherits LayoutComponentBase
  3. <MApp>
  4.     <AppBar>
  5.         <div class="body">
  6.             @Body
  7.         </div>
  8.     </AppBar>
  9. </MApp>
  11. <style>
  12. .body {
  13.     /*设置内容高度 需要减去导航栏的高度*/
  14.     height: calc(100vh - 48px);
  15.     max-height: calc(100vh - 48px);
  16. }
  17. </style>

  1. 创建 AppBar.razor.css 文件并且添加相关代码 ，以下代码是为了实现切换的时候有一个出入效果，具体代码案例来自Animista - On-Demand CSS Animations Library

    2. /*左边滑动出*/
    3. .slide-out-left {
    4.     -webkit-animation: slide-out-left 0.5s;
    5.     animation: slide-out-left 0.5s;
    6. }
    8. /*右边滑动出*/
    9. .slide-out-right {
    10.     -webkit-animation: slide-out-right 0.5s;
    11.     animation: slide-out-right 0.5s;
    12. }
    14. /*右边滑动进*/
    15. .slide-in-right {
    16.     -webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    17.     animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    18. }
    20. /*左边滑动进*/
    21. .slide-in-left {
    22.     -webkit-animation: slide-in-left 0.5s;
    23.     animation: slide-in-left 0.5s;
    24. }
    26. @-webkit-keyframes slide-out-left {
    27.     0% {
    28.         -webkit-transform: translateX(0);
    29.         transform: translateX(0);
    30.         opacity: 1;
    31.     }
    33.     100% {
    34.         -webkit-transform: translateX(-1000px);
    35.         transform: translateX(-1000px);
    36.         opacity: 0;
    37.     }
    38. }
    40. @keyframes slide-out-left {
    41.     0% {
    42.         -webkit-transform: translateX(0);
    43.         transform: translateX(0);
    44.         opacity: 1;
    45.     }
    47.     100% {
    48.         -webkit-transform: translateX(-1000px);
    49.         transform: translateX(-1000px);
    50.         opacity: 0;
    51.     }
    52. }
    55. @-webkit-keyframes slide-out-right {
    56.     0% {
    57.         -webkit-transform: translateX(0);
    58.         transform: translateX(0);
    59.         opacity: 1;
    60.     }
    62.     100% {
    63.         -webkit-transform: translateX(1000px);
    64.         transform: translateX(1000px);
    65.         opacity: 0;
    66.     }
    67. }
    69. @keyframes slide-out-right {
    70.     0% {
    71.         -webkit-transform: translateX(0);
    72.         transform: translateX(0);
    73.         opacity: 1;
    74.     }
    76.     100% {
    77.         -webkit-transform: translateX(1000px);
    78.         transform: translateX(1000px);
    79.         opacity: 0;
    80.     }
    81. }
    84. @-webkit-keyframes slide-in-left {
    85.     0% {
    86.         -webkit-transform: translateX(-1000px);
    87.         transform: translateX(-1000px);
    88.         opacity: 0;
    89.     }
    91.     100% {
    92.         -webkit-transform: translateX(0);
    93.         transform: translateX(0);
    94.         opacity: 1;
    95.     }
    96. }
    98. @keyframes slide-in-left {
    99.     0% {
    100.         -webkit-transform: translateX(-1000px);
    101.         transform: translateX(-1000px);
    102.         opacity: 0;
    103.     }
    105.     100% {
    106.         -webkit-transform: translateX(0);
    107.         transform: translateX(0);
    108.         opacity: 1;
    109.     }
    110. }
    111. @-webkit-keyframes slide-in-right {
    112.     0% {
    113.         -webkit-transform: translateX(1000px);
    114.         transform: translateX(1000px);
    115.         opacity: 0;
    116.     }
    118.     100% {
    119.         -webkit-transform: translateX(0);
    120.         transform: translateX(0);
    121.         opacity: 1;
    122.     }
    123. }
    125. @keyframes slide-in-right {
    126.     0% {
    127.         -webkit-transform: translateX(1000px);
    128.         transform: translateX(1000px);
    129.         opacity: 0;
    130.     }
    132.     100% {
    133.         -webkit-transform: translateX(0);
    134.         transform: translateX(0);
    135.         opacity: 1;
    136.     }
    137. }

  2. 创建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. }
  1. 添加相关页面，在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>
  1. 修改AppBar.razor代码
  3. <div class="@Class" @ontouchstart="TouchStart" @ontouchend="TouchEnd" @onmousedown="Mousedown" @onmouseup="Mouseup" style="height: 100%">
  4.     @ChildContent
  5. </div>
  7.  @*这里也可以是其他组件的Tab，其实只是记录当前的导航的数据*@
  8. <MTabs Centered
  9.        BackgroundColor="indigo"
  10.        ShowArrows="false"
  11.        Value="selectModel.Key"
  12.        Dark>
  13.     @foreach (var i in AppBars)
  14.     {
  15.         <MTab Value="i.Key" OnClick="()=>GoHref(i)">
  16.             @if (!string.IsNullOrEmpty(i.Icon))
  17.             {
  18.                 <MIcon Dark>@i.Icon</MIcon>
  19.             }
  20.             @i.Title
  21.         </MTab>
  22.     }
  23. </MTabs>
  1. 创建AppBar.razor.cs 添加以下代码
  2. public partial class AppBar
  3. {
  4.     #region Inject
  6.     [Inject]
  7.     public required NavigationManager NavigationManager { get; set; }
  9.     #endregion
  11.     private readonly List<AppBarDto> AppBars = new();
  13.     [Parameter]
  14.     public RenderFragment ChildContent { get; set; }
  16.     private AppBarDto selectModel;
  18.     private string Class { get; set; }
  20.     protected override void OnInitialized()
  21.     {
  22.         AppBars.Add(new AppBarDto("首页", "/", "home"));
  23.         AppBars.Add(new AppBarDto("好友", "/personal-center", "mdi-account-group-outline"));
  24.         AppBars.Add(new AppBarDto("功能", "/feature", "mdi-wrench"));
  25.         AppBars.Add(new AppBarDto("个人中心", "/personal-center", "mdi-badge-account-alert"));
  27.         // 默认选择的导航标签
  28.         selectModel = AppBars[0];
  30.         base.OnInitialized();
  31.     }
  33.     /// <summary>
  34.     /// 导航栏跳转
  35.     /// </summary>
  36.     /// <param name="appBar"></param>
  37.     private void GoHref(AppBarDto appBar)
  38.     {
  39.         // 防止重复点击
  40.         if(appBar == selectModel)
  41.         {
  42.             return;
  43.         }
  45.         // 当点击导航的索引大于现在导航时启动滑动效果
  46.         if(AppBars.IndexOf(appBar) > AppBars.IndexOf(selectModel))
  47.         {
  48.             Class = "slide-out-left";
  49.             Task.Run(async () =>
  50.             {
  51.                 // 由于特效时间为0.5s 这里是等待特效完成
  52.                 await Task.Delay(450);
  53.                 NavigationManager.NavigateTo(selectModel.Href);
  54.                 Class = "slide-in-right";
  55.                 _ = InvokeAsync(StateHasChanged);
  56.             });
  57.         }
  58.         // 当点击导航的索引小于现在导航时启动滑动效果
  59.         else if (AppBars.IndexOf(appBar) < AppBars.IndexOf(selectModel))
  60.         {
  61.             Class = "slide-out-right";
  62.             Task.Run(async () =>
  63.             {
  64.                 // 由于特效时间为0.5s 这里是等待特效完成
  65.                 await Task.Delay(450);
  66.                 NavigationManager.NavigateTo(selectModel.Href);
  67.                 Class = "slide-in-left";
  68.                 _ = InvokeAsync(StateHasChanged);
  69.             });
  70.         }
  71.         selectModel = appBar;
  72.         NavigationManager.NavigateTo(appBar.Href);
  73.     }
  76.     /// <summary>
  77.     /// 开始X坐标
  78.     /// </summary>
  79.     private double _startX;
  82.     #region 移动端滑动处理
  84.     /// <summary>
  85.     /// 记录开始坐标
  86.     /// </summary>
  87.     /// <param name="args"></param>
  88.     private void TouchStart(TouchEventArgs args)
  89.     {
  90.         var touch = args.ChangedTouches[0];
  91.         _startX = touch.ScreenX;
  92.     }
  94.     private void TouchEnd(TouchEventArgs args)
  95.     {
  96.         var touch = args.ChangedTouches[0];
  97.         Switchover((decimal)touch.ScreenX);
  98.     }
  100.     #endregion
  102.     #region PC滑动处理
  104.     /// <summary>
  105.     /// 记录开始坐标
  106.     /// </summary>
  107.     /// <param name="args"></param>
  108.     private void Mousedown(MouseEventArgs args)
  109.     {
  110.         _startX = args.ScreenX;
  111.     }
  113.     private void Mouseup(MouseEventArgs args)
  114.     {
  115.         Switchover((decimal)args.ScreenX);
  116.     }
  118.     #endregion
  120.     private void Switchover(decimal screenX)
  121.     {
  122.         var index = AppBars.IndexOf(selectModel);
  123.         // 限制过度滑动
  124.         if (index == AppBars.Count || index > AppBars.Count)
  125.         {
  126.             return;
  127.         }
  129.         // 设置滑动最大位限制，达到这个限制才滑动生效
  130.         var size = 200;
  132.         // 需要滑动200才切换 如果开始坐标x大于 当前结束的x坐标往右边切换tab
  133.         if ((decimal)_startX - size > screenX)
  134.         {
  135.             // 如果右边往左边滑动 当前索引是当前最大数量的话不需要切换
  136.             if (index == AppBars.Count - 1)
  137.             {
  138.                 return;
  139.             }
  140.             selectModel = AppBars[index + 1];
  141.             Class = "slide-out-left";
  143.             Task.Run(async () =>
  144.             {
  145.                 // 由于特效时间为0.5s 这里是等待特效完成
  146.                 await Task.Delay(450);
  147.                 NavigationManager.NavigateTo(selectModel.Href);
  148.                 Class = "slide-in-right";
  149.                 _ = InvokeAsync(StateHasChanged);
  150.             });
  151.         }
  152.         else if ((decimal)_startX + size < screenX)
  153.         {
  154.             // 如果左边往右边滑动 当前索引是0的话不需要切换
  155.             if (index == 0)
  156.             {
  157.                 return;
  158.             }
  159.             selectModel = AppBars[index - 1];
  160.             Class = "slide-out-right";
  161.             Task.Run(async () =>
  162.             {
  163.                 // 由于特效时间为0.5s 这里是等待特效完成
  164.                 await Task.Delay(450);
  165.                 NavigationManager.NavigateTo(selectModel.Href);
  166.                 Class = "slide-in-left";
  167.                 _ = InvokeAsync(StateHasChanged);
  168.             });
  169.         }
  170.     }
  171. }

运行效果：

一个热爱学习的token

原文链接：https://www.cnblogs.com/hejiale010426/p/17065146.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

微信开发热门文章

  • 手把手教你如何获取微信用户openid
  • Web端扫码登录的原理和实现讲解
  • keycloak~为微信二维码添加动态kc认可的动态state
  • 从零玩转系列之微信支付开篇
  • 微信公众号开发消息推送功能
  • 如何获取微信的版本号详解【附完整源码】
  • 使用canvas生成含有微信头像的邀请海报没有微信头像问题
  • node微信开发之获取access_token+自定义菜单
  • 微信开发之微信jssdk录音功能开发示例
  • 一图讲清楚公众号扫码关注绑定手机号自动登录

    • 微信开发推荐文章

  • 微服务下认证授权框架的探讨
  • 一图讲清楚公众号扫码关注绑定手机号自动登录
  • 微信公众号开发消息推送功能
  • 手把手教你如何获取微信用户openid
  • Blazor如何实现类似于微信的Tab切换？

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号