AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2023-07-12 115
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Blazor如何实现类似于微信的Tab切换？

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

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

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

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

准备工作

  1. 创建 AppBar.razor文件

  2. 修改MainLayout.razor文件代码
    ```html
    @inherits LayoutComponentBase




@Body 



3. 创建 `AppBar.razor.css` 文件并且添加相关代码 ，以下代码是为了实现切换的时候有一个出入效果，具体代码案例来自[Animista - On-Demand CSS Animations Library](https://animista.net/play/entrances/slide-in-blurred)

/左边滑动出/
.slide-out-left {
-webkit-animation: slide-out-left 0.5s;
animation: slide-out-left 0.5s;
}

/右边滑动出/
.slide-out-right {
-webkit-animation: slide-out-right 0.5s;
animation: slide-out-right 0.5s;
}

/右边滑动进/
.slide-in-right {
-webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/左边滑动进/
.slide-in-left {
-webkit-animation: slide-in-left 0.5s;
animation: slide-in-left 0.5s;
}

@-webkit-keyframes slide-out-left {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}

   100% {
       -webkit-transform: translateX(-1000px);
       transform: translateX(-1000px);
       opacity: 0;
   }

}

@keyframes slide-out-left {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}

   100% {
       -webkit-transform: translateX(-1000px);
       transform: translateX(-1000px);
       opacity: 0;
   }

}

@-webkit-keyframes slide-out-right {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}

   100% {
       -webkit-transform: translateX(1000px);
       transform: translateX(1000px);
       opacity: 0;
   }

}

@keyframes slide-out-right {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}

   100% {
       -webkit-transform: translateX(1000px);
       transform: translateX(1000px);
       opacity: 0;
   }

}

@-webkit-keyframes slide-in-left {
0% {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
opacity: 0;
}

   100% {
       -webkit-transform: translateX(0);
       transform: translateX(0);
       opacity: 1;
   }

}

@keyframes slide-in-left {
0% {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
opacity: 0;
}

   100% {
       -webkit-transform: translateX(0);
       transform: translateX(0);
       opacity: 1;
   }

}
@-webkit-keyframes slide-in-right {
0% {
-webkit-transform: translateX(1000px);
transform: translateX(1000px);
opacity: 0;
}

   100% {
       -webkit-transform: translateX(0);
       transform: translateX(0);
       opacity: 1;
   }

}

@keyframes slide-in-right {
0% {
-webkit-transform: translateX(1000px);
transform: translateX(1000px);
opacity: 0;
}

   100% {
       -webkit-transform: translateX(0);
       transform: translateX(0);
       opacity: 1;
   }

}


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

```c#
public class AppBarDto
{
    public string Key { get; set; }

    /// <summary>
    /// 标题
    /// </summary>
    public string Title { get; init; }

    /// <summary>
    /// 图标
    /// </summary>
    public string? Icon { get; set; }

    /// <summary>
    /// 路由
    /// </summary>
    public string Href { get; init; }

    public AppBarDto(string title, string href, string? icon = null)
    {
        Title = title;
        Icon = icon;
        Href = href;
        Key = Guid.NewGuid().ToString("N");
    }
}
  1. 添加相关页面，在Pages文件夹下，分别创建Index.razor,Feature.razor,Friend.razor,PersonalCenter.razor

文件相关代码：
Index.razor

@page "/"
<h3>Index</h3>

Feature.razor

@page "/feature"
<h3>Feature</h3>

Friend.razor

@page "/friend"
<h3>Friend</h3>

PersonalCenter.razor

@page "/personal-center"
<h3>PersonalCenter</h3>
  1. 修改AppBar.razor代码
    ```html

@ChildContent

@这里也可以是其他组件的Tab，其实只是记录当前的导航的数据@


@foreach (var i in AppBars)
{

@if (!string.IsNullOrEmpty(i.Icon))
{
@i.Icon
}
@i.Title

} 

7. 创建`AppBar.razor.cs` 添加以下代码 
```c#    

public partial class AppBar
{
    #region Inject

    [Inject]
    public required NavigationManager NavigationManager { get; set; }

    #endregion

    private readonly List<AppBarDto> AppBars = new();

    [Parameter]
    public RenderFragment ChildContent { get; set; }

    private AppBarDto selectModel;

    private string Class { get; set; }

    protected override void OnInitialized()
    {
        AppBars.Add(new AppBarDto("首页", "/", "home"));
        AppBars.Add(new AppBarDto("好友", "/personal-center", "mdi-account-group-outline"));
        AppBars.Add(new AppBarDto("功能", "/feature", "mdi-wrench"));
        AppBars.Add(new AppBarDto("个人中心", "/personal-center", "mdi-badge-account-alert"));

        // 默认选择的导航标签
        selectModel = AppBars[0];

        base.OnInitialized();
    }

    /// <summary>
    /// 导航栏跳转
    /// </summary>
    /// <param name="appBar"></param>
    private void GoHref(AppBarDto appBar)
    {
        // 防止重复点击
        if(appBar == selectModel)
        {
            return;
        }

        // 当点击导航的索引大于现在导航时启动滑动效果
        if(AppBars.IndexOf(appBar) > AppBars.IndexOf(selectModel))
        {
            Class = "slide-out-left";
            Task.Run(async () =>
            {
                // 由于特效时间为0.5s 这里是等待特效完成
                await Task.Delay(450);
                NavigationManager.NavigateTo(selectModel.Href);
                Class = "slide-in-right";
                _ = InvokeAsync(StateHasChanged);
            });
        }
        // 当点击导航的索引小于现在导航时启动滑动效果
        else if (AppBars.IndexOf(appBar) < AppBars.IndexOf(selectModel))
        {
            Class = "slide-out-right";
            Task.Run(async () =>
            {
                // 由于特效时间为0.5s 这里是等待特效完成
                await Task.Delay(450);
                NavigationManager.NavigateTo(selectModel.Href);
                Class = "slide-in-left";
                _ = InvokeAsync(StateHasChanged);
            });
        }
        selectModel = appBar;
        NavigationManager.NavigateTo(appBar.Href);
    }


    /// <summary>
    /// 开始X坐标
    /// </summary>
    private double _startX;


    #region 移动端滑动处理

    /// <summary>
    /// 记录开始坐标
    /// </summary>
    /// <param name="args"></param>
    private void TouchStart(TouchEventArgs args)
    {
        var touch = args.ChangedTouches[0];
        _startX = touch.ScreenX;
    }

    private void TouchEnd(TouchEventArgs args)
    {
        var touch = args.ChangedTouches[0];
        Switchover((decimal)touch.ScreenX);
    }

    #endregion

    #region PC滑动处理

    /// <summary>
    /// 记录开始坐标
    /// </summary>
    /// <param name="args"></param>
    private void Mousedown(MouseEventArgs args)
    {
        _startX = args.ScreenX;
    }

    private void Mouseup(MouseEventArgs args)
    {
        Switchover((decimal)args.ScreenX);
    }

    #endregion

    private void Switchover(decimal screenX)
    {
        var index = AppBars.IndexOf(selectModel);
        // 限制过度滑动
        if (index == AppBars.Count || index > AppBars.Count)
        {
            return;
        }

        // 设置滑动最大位限制，达到这个限制才滑动生效
        var size = 200;

        // 需要滑动200才切换 如果开始坐标x大于 当前结束的x坐标往右边切换tab
        if ((decimal)_startX - size > screenX)
        {
            // 如果右边往左边滑动 当前索引是当前最大数量的话不需要切换
            if (index == AppBars.Count - 1)
            {
                return;
            }
            selectModel = AppBars[index + 1];
            Class = "slide-out-left";

            Task.Run(async () =>
            {
                // 由于特效时间为0.5s 这里是等待特效完成
                await Task.Delay(450);
                NavigationManager.NavigateTo(selectModel.Href);
                Class = "slide-in-right";
                _ = InvokeAsync(StateHasChanged);
            });
        }
        else if ((decimal)_startX + size < screenX)
        {
            // 如果左边往右边滑动 当前索引是0的话不需要切换
            if (index == 0)
            {
                return;
            }
            selectModel = AppBars[index - 1];
            Class = "slide-out-right";
            Task.Run(async () =>
            {
                // 由于特效时间为0.5s 这里是等待特效完成
                await Task.Delay(450);
                NavigationManager.NavigateTo(selectModel.Href);
                Class = "slide-in-left";
                _ = InvokeAsync(StateHasChanged);
            });
        }
    }
}

运行效果：

一个热爱学习的token

文章标签：
C#
Android开发
关键词：
微信tab切换
tokengo
目录
相关文章
hxyzvw3onrkfg
|
小程序 索引
【微信小程序】实现页面tab切换效果
通过以下的方法实现tab与页面内容联动。
hxyzvw3onrkfg
430 0
【微信小程序】实现页面tab切换效果
邹荣乐
|
2月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
邹荣乐
682 7
邹荣乐
|
2月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序：四大解决方案，轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序：四大解决方案，轻松应对主包与vendor.js过大打包难题
邹荣乐
742 1
yuanzhengme
|
2月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么？
微信小程序的开发完整流程是什么？
yuanzhengme
146 7
ly~
|
3月前
|
存储 供应链 小程序
除了微信小程序，PHP 还可以用于开发哪些类型的小程序？
除了微信小程序，PHP 还可用于开发多种类型的小程序，包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域，PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时，在企业内部，PHP 可提升工作效率，实现审批流程、文件共享、生产计划等功能；在医疗和教育等行业，PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
86 6
邹荣乐
|
2月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
邹荣乐
244 1
众所周知
|
2月前
|
小程序 前端开发 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【10月更文挑战第3天】随着移动互联网的发展，微信小程序凭借便捷的用户体验和强大的社交传播能力，成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的身份认证与授权机制，包括手机号码验证、微信登录、第三方登录及角色权限控制等方法，并强调了安全性、用户体验和合规性的重要性，帮助开发者更好地理解和应用这一关键技术。
众所周知
86 5
众所周知
|
2月前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【10月更文挑战第3天】微信小程序作为新兴应用形态，凭借便捷体验与社交传播能力，成为企业拓展业务的新渠道。本文探讨了微信小程序全栈开发中的PWA技术应用，包括离线访问、后台运行、桌面图标及原生体验等方面，助力开发者提升小程序性能与用户体验。PWA技术在不同平台的兼容性、性能优化及用户体验是实践中需注意的关键点。
众所周知
72 5
java冯坚持
|
2月前
|
小程序 JavaScript API
微信小程序开发之：保存图片到手机，使用uni-app 开发小程序；还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
java冯坚持
963 0
微信小程序开发之：保存图片到手机，使用uni-app 开发小程序；还有微信原生保存图片到手机
yuanzhengme
|
2月前
|
存储 小程序 安全
微信的开发管理都需要配置什么？
【10月更文挑战第17天】微信的开发管理都需要配置什么？
yuanzhengme
35 0