Blazor实现微信的Tab切换功能

更新时间：2023年01月23日 09:44:45 作者：token

这篇文章主要介绍了Blazor实现微信的Tab切换功能,本文中的UI组件使用的是MASA Blazor,您也可以是其他的UI框架，这个并不影响实际的运行效果，本文案例是兼容PC和Android的，演示效果是android中执行的，在PC中执行效果依然有效，需要的朋友可以参考下

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

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

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

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

准备工作

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

@inherits LayoutComponentBase

<MApp>
    <AppBar>
        <div class="body">
            @Body
        </div>
    </AppBar>
</MApp>

<style>
.body {
    /*设置内容高度 需要减去导航栏的高度*/
    height: calc(100vh - 48px);
    max-height: calc(100vh - 48px);
}
</style>

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

/*左边滑动出*/
.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;
    }
}

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

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");
    }
}

添加相关页面，在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>

@page "/personal-center"
<h3>PersonalCenter</h3>

修改AppBar.razor代码

<div class="@Class" @ontouchstart="TouchStart" @ontouchend="TouchEnd" @onmousedown="Mousedown" @onmouseup="Mouseup" style="height: 100%">
    @ChildContent
</div>

 @*这里也可以是其他组件的Tab，其实只是记录当前的导航的数据*@
<MTabs Centered
       BackgroundColor="indigo"
       ShowArrows="false"
       Value="selectModel.Key"
       Dark>
    @foreach (var i in AppBars)
    {
        <MTab Value="i.Key" OnClick="()=>GoHref(i)">
            @if (!string.IsNullOrEmpty(i.Icon))
            {
                <MIcon Dark>@i.Icon</MIcon>
            }
            @i.Title
        </MTab>
    }
</MTabs>

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

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);
            });
        }
    }
}

运行效果：

到此这篇关于Blazor实现微信的Tab切换功能的文章就介绍到这了,更多相关Blazor实现微信Tab切换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript数据类型转换详解（推荐）
众所周知JavaScript是一门弱类型（语言，即变量的类型是不确定的。所以下面这篇文章主要给大家介绍了关于JavaScript数据类型转换的相关资料,需要的朋友可以参考下
2021-05-05
JavaScript版TAB选项卡效果实例
tab选项卡效果就是当我指上或经过时就会显示这个选项卡下面的内容，下面我来给大家介绍一款纯js实现的TAB选项卡效果，有需要的朋友可以参考一下
2013-08-08
uniapp小程序视图容器cover-view使用详解
在日常开发中,使用uniapp开发项目有时会遇到需要覆盖组件的问题,但由于某些组件的渲染优先级过高,例如video,map ,在小程序中只能使用cover-view去覆盖,这篇文章主要给大家介绍了关于uniapp小程序视图容器cover-view使用的相关资料,需要的朋友可以参考下
2022-08-08
使用JavaScript 将数据网格绑定到 GraphQL 服务的操作方法
GraphQL是管理JavaScript应用程序中数据的优秀工具,本教程展示了GraphQL和SpreadJS如何简单地构建应用程序, GraphQL 和 SpreadJS都有更多功能可供探索,因此您可以做的事情远远超出了这个示例,感兴趣的朋友一起看看吧
2023-11-11
bootstrap可编辑下拉框jquery.editable-select
这篇文章主要介绍了bootstrap可编辑下拉框jquery.editable-select的相关资料，需要的朋友可以参考下
2017-10-10
JavaScript设计模式之观察者模式实例详解
这篇文章主要介绍了JavaScript设计模式之观察者模式,结合实例形式详细分析了javascript观察者模式的概念、原理、用法及相关操作注意事项,需要的朋友可以参考下
2019-01-01
Highcharts 非常实用的Javascript统计图demo示例
官网实例中给出了各式各样的demo，可以参照document修改自己需要的即可，本文实现的是一个学生成绩走势demo，有需求的朋友可以参考下哈，希望对大家有所帮助
2013-07-07
JavaScript实现单链表过程解析
这篇文章主要介绍了JavaScript实现单链表过程，链表中的元素在内存中不必是连续的空间。链表的每个元素有一个存储元素本身的节点和指向下一个元素的引用。下面请和小编一起进入文章了解更多的详细内容吧
2021-12-12
JS实现指定区域的全屏显示功能示例
这篇文章主要介绍了JS实现指定区域的全屏显示功能,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
2019-04-04
JS常见问题整理(持续更新)
JS常见问题在开发过程中会经常遇到过，本文整理了一些实际开发中存在的问题，晒出来与大家一起分享，感兴趣的朋友可以参考下，希望对大家有所帮助
2013-08-08