Blazor如何實現類似於微信的Tab切換？

来源:https://www.cnblogs.com/hejiale010426/archive/2023/01/23/17064872.html
-Advertisement-
Play Games

是否有小伙伴在使用tab的時候想進行滑動切換Tab？ 並且有滑動左出左進，右出右進的效果 ，本文將講解怎麼在Blazor中去通過滑動切換Tab 本文中的UI組件使用的是MASA Blazor,您也可以是其他的UI框架，這個並不影響實際的運行效果，本文案例是相容PC和Android的，演示效果是and ...


是否有小伙伴在使用tab的時候想進行滑動切換Tab？

並且有滑動左出左進，右出右進的效果 ，本文將講解怎麼在Blazor中去通過滑動切換Tab

本文中的UI組件使用的是MASA Blazor,您也可以是其他的UI框架，這個並不影響實際的運行效果，本文案例是相容PC和Android的，演示效果是android中執行的，在PC中執行效果依然有效（親測）

首先安裝MASA Blazor 根據 MASA Blazor安裝MASA Blazor

準備工作

  1. 創建 AppBar.razor文件

  2. 修改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>

  1. 創建 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;
    }
}

  2. 創建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");
    }
}
  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代碼


<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>
  1. 創建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

qq交流群：737776595
微信交流群：


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Three.js 進階之旅：新春特典-Rabbit craft go 🐇
    兔年到了，祝大家身體健，康萬事順利。本文內容作為兔年新春紀念頁面，將使用 Three.js 及 其他前端開發知識，創建一個以兔子為主題的 3D 簡單的趣味頁面 Rabbit craft go。本文內容包括使用純代碼創建三維浮島、小河、樹木、兔子、胡蘿蔔以及兔子的運動交互、浮島的動畫效果等。本文包含的... ...
  • JavaScript 記憶體管理及垃圾回收
    JavaScript 中的記憶體管理主要由 JavaScript 引擎負責，開發人員不需要手動管理記憶體。JavaScript 引擎使用垃圾回收演算法來實現自動垃圾回收。 JavaScript 垃圾回收演算法是指在 JavaScript 程式中，用來回收不再使用的記憶體的演算法。 ...
  • 『移動端』4種方法解決設置padding時寬高比實際預算的大的問題
    使用 CSS 的 box-sizing 屬性 MDN docs 關於box-sizing 一種解決方法是使用 CSS 的 box-sizing 屬性來控制元素的盒模型。預設情況下，盒模型是 "content-box"，這意味著元素的寬度和高度只包括其內容，而不包括 padding 和 border。 ...
  • Python 內置界面開發框架 Tkinter入門篇 甲
    最近寫了個 python 的 tkinter 框架入門教程，希望給大家介紹一下這個框架的上手過程，這是一個系列文章，現在是第一篇。 ...
  • 學習筆記——SSM整合（思路、步驟）
    2023-01-22 一、SSM整合 1、Spring + SpringMVC （1）容器管理對象，由DispatcherServlet管理 （2）Spring容器對象，由ContextLoaderListener管理 2、解決組件掃描的衝突問題 （1）SpringMVC只掃描Controller層 ...
  • 【速記】C++ STL自定義排序
    這篇筆記咱日後應該還會進行補充。 關於sort的比較函數 STL的algorithm庫中的sort函數，可以接受一個cmp函數作為第三個參數，用來指定排序的規則。 自定義sort比較函數 cmp(a,b)函數的返回值是一個bool值，當返回值為true時不改變元素順序。 可以把其中的a看作序列中前一 ...
  • 學習筆記——SpringMVC攔截器的兩種裝配方式；SpringMVC攔截器工作原理；SpringMVC中的異常處理器；SpringMVC工作原理
    2023-01-22 一、SpringMVC攔截器的兩種裝配方式 1、全局裝配（放置在springmvc.xml中） <!-- 裝配攔截器--> <!-- 全局裝配--> <mvc:interceptors> <ref bean="myInterceptor"></ref> </mvc:interc ...
  • BC6-牛牛的第二個整數
    題目描述 牛牛從鍵盤上輸入三個整數，並嘗試在屏幕上顯示第二個整數。 輸入描述 一行輸入 3 個整數，用空格隔開。 輸出描述 請輸出第二個整數的值。 示例 1 輸入：1 2 3 輸出：2 解題思路 方案一 使用 3 個整形變數依次存儲輸入的 3 個整數，然後將第二個整形變數的數據輸出。 具體代碼如下： ...
一周排行
    -Advertisement-
    Play Games
  • （開源）都進來！簡單易懂、功能強大的許可權+可視化流程管理系統
    1、預覽地址：http://139.155.137.144:9012 2、qq群:801913255 一、前言 隨著網路的發展，企業對於信息系統數據的保密工作愈發重視，不同身份、角色對於數據的訪問許可權都應該大相徑庭。 列如 1、不同登錄人員對一個數據列表的可見度是不一樣的，如數據列、數據行、數據按鈕 ...
  • 設計模式-C#實現簡單工廠模式
    前言 上一篇文章寫瞭如何使用RabbitMQ做個簡單的發送郵件項目，然後評論也是比較多，也是準備去學習一下如何確保RabbitMQ的消息可靠性，但是由於時間原因，先來說說設計模式中的簡單工廠模式吧！ 在瞭解簡單工廠模式之前，我們要知道C#是一款面向對象的高級程式語言。它有3大特性，封裝、繼承、多態。 ...
  • Nodify學習 一：介紹與使用
    Nodify學習 一：介紹與使用 - 可樂_加冰 - 博客園 (cnblogs.com) Nodify學習 二：添加節點 - 可樂_加冰 - 博客園 (cnblogs.com) 介紹 Nodify是一個WPF基於節點的編輯器控制項，其中包含一系列節點、連接和連接器組件，旨在簡化構建基於節點的工具的過程 ...
  • 使用C#/.NET解析Wiki百科數據實現獲取歷史上的今天
    創建一個webapi項目做測試使用。 創建新控制器，搭建一個基礎框架，包括獲取當天日期、wiki的請求地址等 創建一個Http請求幫助類以及方法，用於獲取指定URL的信息 使用http請求訪問指定url，先運行一下，看看返回的內容。內容如圖右邊所示，實際上是一個Json數據。我們主要解析 大事記 部 ...
  • .NET科普：.NET簡史、.NET Standard以及C#和.NET Framework之間的關係
    最近在不少自媒體上看到有關.NET與C#的資訊與評價，感覺大家對.NET與C#還是不太瞭解，尤其是對2016年6月發佈的跨平臺.NET Core 1.0，更是知之甚少。在考慮一番之後，還是決定寫點東西總結一下，也回顧一下.NET的發展歷史。 首先，你沒看錯，.NET是跨平臺的，可以在Windows、 ...
  • Nodify學習 二：添加節點
    Nodify學習 一：介紹與使用 - 可樂_加冰 - 博客園 (cnblogs.com) Nodify學習 二：添加節點 - 可樂_加冰 - 博客園 (cnblogs.com) 添加節點（nodes） 通過上一篇我們已經創建好了編輯器實例現在我們為編輯器添加一個節點 添加model和viewmode ...
  • 論如何直接用EF Core實現創建更新時間、用戶審計，自動化樂觀併發、軟刪除和樹形查詢（上）
    前言 資料庫併發，數據審計和軟刪除一直是數據持久化方面的經典問題。早些時候，這些工作需要手寫複雜的SQL或者通過存儲過程和觸發器實現。手寫複雜SQL對軟體可維護性構成了相當大的挑戰，隨著SQL字數的變多，用到的嵌套和複雜語法增加，可讀性和可維護性的難度是幾何級暴漲。因此如何在實現功能的同時控制這些S ...
  • C# 使用模式匹配的好處,因為好用所以推薦~
    類型檢查和轉換：當你需要檢查對象是否為特定類型，並且希望在同一時間內將其轉換為那個類型時，模式匹配提供了一種更簡潔的方式來完成這一任務，避免了使用傳統的as和is操作符後還需要進行額外的null檢查。 複雜條件邏輯：在處理複雜的條件邏輯時，特別是涉及到多個條件和類型的情況下，使用模式匹配可以使代碼更 ...
  • 推薦一種批量判斷文件是否存在的快速辦法
    在日常開發中，我們經常需要和文件打交道，特別是桌面開發，有時候就會需要載入大批量的文件，而且可能還會存在部分文件缺失的情況，那麼如何才能快速的判斷文件是否存在呢？如果處理不當的，且文件數量比較多的時候，可能會造成卡頓等情況，進而影響程式的使用體驗。今天就以一個簡單的小例子，簡述兩種不同的判斷文件是否... ...
  • 論如何直接用EF Core實現創建更新時間、用戶審計，自動化樂觀併發、軟刪除和樹形查詢（中）
    前言 資料庫併發，數據審計和軟刪除一直是數據持久化方面的經典問題。早些時候，這些工作需要手寫複雜的SQL或者通過存儲過程和觸發器實現。手寫複雜SQL對軟體可維護性構成了相當大的挑戰，隨著SQL字數的變多，用到的嵌套和複雜語法增加，可讀性和可維護性的難度是幾何級暴漲。因此如何在實現功能的同時控制這些S ...
所有分類