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

tokengo發表於2023-01-23

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

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

微信小程式-uniapp-切換tab時資料列表如何切換？
2024-06-13
微信小程式APP
用CSS實現tab切換
2024-12-02
CSS
純CSS實現Tab欄的切換
2018-11-21
CSS
用純css實現Tab切換
2018-07-17
CSS
javascript實現tab切換的四種方法
2021-01-03
JavaScript
用CSS實現Tab頁切換效果
2019-03-04
CSS
Flutter仿頭條頂部tab切換實現
2020-02-12
Flutter
html兩種方法來實現tab切換效果
2020-12-21
HTML
vue 實現tab切換動態載入不同的元件
2018-04-05
Vue元件
GetX 實現類似微信轉發搜尋多選好友
2021-05-08
微信小程式自定義tab，多層tab巢狀實現
2019-03-04
微信小程式巢狀
直播系統中網頁類似app頁面切換動畫的實現方式
2021-10-10
網頁APP動畫
前端小demo——tab切換
2018-06-04
前端
使用Bootstrap tab頁切換的使用
2018-08-17
boot
MySQL 06 mysql 如何實現類似 oracle 的 merge into
2024-04-11
MySqlOracle
專案常用效果！Flutter仿頭條頂部tab切換實現！
2020-02-13
Flutter
小程式類似抖音視訊整屏切換
2018-11-13
Tab鍵切換選擇物件
2020-11-15
物件
類似微信首頁彈性滾動和慣性滾動效果的實現——OverScroll
2019-03-16
WinForm使用DataGridView實現類似Excel表格的查詢替換
2021-07-22
ORMViewExcel
關於微信 H5 頁面切換 webview 的問題
2022-03-07
H5WebView
tab-switch 樣式的新增與 tab元素樣式的切換
2020-06-05
如何實現類似 lodash 的 get 與 merge 函式
2019-05-13
函式
教你如何用SQLite 實現if not exist 類似功能的操作
2022-01-12
SQLite
PostgreSQL類似OracleMERGE功能的實現
2018-12-20
SQLOracle
flutter實戰6：TAB頁面切換免重繪
2018-10-03
Flutter
Appium 關於微信 H5 頁面切換 webview 的問題
2024-10-21
APPH5WebView
【Android】 banner+tab吸頂+viewpager切換+重新整理載入之實現
2019-03-13
AndroidViewpager
微信小程式實現換膚功能
2019-01-10
微信小程式
UI介面微信底部（ViewPager實現Tab，左右滑動+底部點選）
2020-04-05
UIViewpager
純CSS的導航欄Tab切換例項
2021-09-09
CSS
「譯」用 Blazor WebAssembly 實現微前端
2021-01-05
BlazorWeb前端
RxJava 是如何實現執行緒切換的（下）
2018-06-04
RxJava執行緒
Dledger是如何實現主從自動切換的
2020-09-28
如何使用SAP CRM WebClient UI實現一個類似新浪微博的字數統計器
2020-09-05
WebclientUI
datatable.js之tab切換(新增,刪除)
2018-10-22
JS
使用JavaScript設定Tab欄自動切換
2024-04-07
JavaScript
微信小程式頁面功能-----標籤切換
2024-04-20
微信小程式

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

準備工作

執行效果：

相關文章