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

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

转载作者：我是一只小鸟更新时间：2023-01-23 14:31:06

27

4

是否有小伙伴在使用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>

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

运行效果：

一个热爱学习的token 。

最后此篇关于Blazor如何实现类似于微信的Tab切换？的文章就讲到这里了,如果你想了解更多关于Blazor如何实现类似于微信的Tab切换？的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！。

27

4

0

文章推荐：工作这么多年，我总结的数据传输对象(DTO)的最佳实践

文章推荐：上周热点回顾（1.16-1.22）

文章推荐：唯愿梦醒一轮回，玉水河畔浣溪纱

文章推荐： DVWA靶场实战(九)——WeakSessionIDS

tabs - 有没有办法垂直堆叠 `Tabs`？
我在看 Tabs UI 的选项。默认行为是它们水平堆叠。有没有办法改变它？我想堆叠Tabs垂直。它将节省大量的 UI“不动产”，尤其是在移动应用程序 UI 中。最佳答案尝试这个: Tabs ta
tabs - 无法在 Zsh 中将向后 TAB 作为 Shift-TAB
问题:在 Zsh 中使用 TAB 向后导航，类似于在 Firefox 中 Shift-TAB Shift-TAB 应该执行的操作示例我在终端中运行以下代码 ls 我明白了 A B C D E F
tab-completion - 将 tab 完成键绑定(bind)更改为 MC 中的 tab
有很多人想知道如何完成制表符。这不是这些问题之一。问题是如何将 tab 键分配给 tab 补全？ alt-tab/esc-tab 很痛苦。在面板禁用模式选项卡完成工作，这让我暂时...但我仍然希望面板
react-native - createBottomTabNavigator : how do I reload/refresh a tab screen on tab on the tab-icon?
所以我有一个带有 3 个屏幕的 TabNavigator。 import React from 'react'; import {TabNavigator,createBottomTabNavigat
tabs - 如何在文本框中按 Tab 键后触发事件
我想触发一个事件，例如当我在文本框中按 Tab 键时显示警报消息。 $("input").blur(function (e) { if (e.which == 9) alert(
javascript - $( "#tabs").tabs();不是函数
我将这段代码设置为创建一个选项卡式菜单，它显示为一个选项卡式菜单，但当我加载网站时，选项卡在单击时不会改变。在“检查元素”中它说 $( "#tabs").tabs();不是函数。我不知道下一步要解决这
javascript - 当您按 Tab 时，它应该 Tab 到下一个空白文本输入框 JavaScript，而不使用 Tab 索引
表单中有多个输入字段的示例，因为有一些字段在此之前会自动填充，如果我按 Tab 键，那么它应该跳过该自动填充的输入字段并应转到空白输入字段我尝试过，但是当我开始在空白输入中写入时会发生什么，它也会自
google-chrome - chrome.tabs 问题与 chrome.tabs.update 和 chrome.tabs.executeScript
我想写一个小的 chrome 扩展程序，它应该从网页 A(当前网页)获取信息，将选项卡更新到网页 B，然后将代码注入(inject)网页 B。不幸的是，以下代码正在将网页更新到 B 但注入(injec
Angular Material 选项卡 : Prevent tab change of mat-tab-group if the form in current tab is dirty
如果当前事件选项卡中的表单很脏，我试图阻止 mat-tab 的选项卡更改。但是我找不到拦截选项卡更改事件的方法。 // Tab 0 Content // Tab
terminal - iterm2 问题 : create new tab with same path of previous current tab BUT 2 tabs are clones and not indepedent
我已从 MacOS Mojave 上的默认终端切换到 iterm2 .我有一个关于从当前选项卡打开新选项卡的问题。确实，我希望与上一个当前选项卡处于同一路径。为此，我执行了经典程序，即转到 ite
jquery-ui-tabs - $(...).tabs 不是函数
我在我的网站的两页上有此代码，但在一页上该功能不起作用。 Firebug 向我显示“$(...).tabs 不是函数”。我不明白为什么，谁能告诉我什么是错的？这是有效的: http://www.in
tabs - 如何在 CMD 中创建 %tab%
我需要可靠的方法来为 Windows 和 XP 创建 %tab% (包含一个制表符)。 SET TAB=" " 应该适用于 Windows 7(未测试)但不适用于 Win XP(已测试)。这个 fo
RMarkdown 似乎无法在 Tabs 中生成 Tabs
我正在尝试使用 RMarkdown 制作静态网页。我想定义一个 UI，它有第一层选项卡，然后是第一层下面的选项卡。我已经在 RMarkdown: Tabbed and Untabbed heading
RMarkdown 似乎无法在 Tabs 中生成 Tabs
我正在尝试使用 RMarkdown 制作静态网页。我想定义一个 UI，它有第一层选项卡，然后是第一层下面的选项卡。我已经在 RMarkdown: Tabbed and Untabbed heading
tabs - 通过 chrome.tabs.create 打开多个选项卡时出现问题
我在使用 chrome.tabs.create 方法打开多个选项卡时遇到问题。我正在尝试使用 chrome.tabs.create 循环打开大约 9 个选项卡，但打开的选项卡数量仅限于 4 个。看起来
tabs - 如何自定义 Material UI Tabs 指示器的宽度和位置
我正在使用 Material ui 的标签，并且能够对标签的指示器进行更改。但是，我正在尝试使用样式将每个选项卡的指示器宽度减小到某个固定宽度。但似乎指标以一些计算值定位在左侧，并且给它一个宽度不会使
macos - v. Emacs 中的 TAB
我在 OS X 终端中使用 emacs 24.3，并且遇到了一些奇怪的事情。在 markdown-mode.el 中，tab 键通过 (define-key map (kbd "") 'markdo
tabs - 错误 : There is no clipping info for given tab
在 Chrome 开发者工具上 Uncaught (in promise) Error: There is no clipping info for given tab at E._handleRes
vim - 如何为:tab new，:tab，:tab设置快捷方式？
在vim中，我想将:tabnew缩短为:tn，将:tabp缩短为:th，将:tabn缩短为:tl在我的.vimrc中。知道我将如何重新映射这样的命令吗？最佳答案使用cabbrev： ca tn t
tabs - TabIndex - 点击选项卡将我移动到地址栏 - 无法使用焦点或 +tab 索引解决此问题
我读过几个主题，讨论 IE 中的地址栏在使用 TAB 时基本上是第一个获得焦点的主题(MSDN 自己的文档讨论了这一点)。然而，我也见过一些情况，但情况并不总是如此...... 我有一个母版页，内容

首页

博学

6Ren·AI

商城