欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Blazor實現(xiàn)微信的Tab切換功能

 更新時間：2023年01月23日 09:44:45   作者：token  
這篇文章主要介紹了Blazor實現(xiàn)微信的Tab切換功能,本文中的UI組件使用的是MASA?Blazor,您也可以是其他的UI框架，這個并不影響實際的運行效果，本文案例是兼容PC和Android的，演示效果是android中執(zhí)行的，在PC中執(zhí)行效果依然有效，需要的朋友可以參考下

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

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

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

首先安裝MASA Blazor 根據(jù) MASA Blazor安裝MASA Blazor

準備工作

  • 創(chuàng)建 AppBar.razor文件
  • 修改MainLayout.razor文件代碼
@inherits LayoutComponentBase

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

<style>
.body {
    /*設置內(nèi)容高度 需要減去導航欄的高度*/
    height: calc(100vh - 48px);
    max-height: calc(100vh - 48px);
}
</style>

創(chuàng)建 AppBar.razor.css 文件并且添加相關代碼 ，以下代碼是為了實現(xiàn)切換的時候有一個出入效果，具體代碼案例來自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;
    }
}

創(chuàng)建AppBar的模型用于動態(tài)添加導航欄, 創(chuàng)建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文件夾下，分別創(chuàng)建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，其實只是記錄當前的導航的數(shù)據(jù)*@
<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>

創(chuàng)建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>
    /// 導航欄跳轉(zhuǎn)
    /// </summary>
    /// <param name="appBar"></param>
    private void GoHref(AppBarDto appBar)
    {
        // 防止重復點擊
        if(appBar == selectModel)
        {
            return;
        }

        // 當點擊導航的索引大于現(xiàn)在導航時啟動滑動效果
        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);
            });
        }
        // 當點擊導航的索引小于現(xiàn)在導航時啟動滑動效果
        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大于 當前結(jié)束的x坐標往右邊切換tab
        if ((decimal)_startX - size > screenX)
        {
            // 如果右邊往左邊滑動 當前索引是當前最大數(shù)量的話不需要切換
            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實現(xiàn)微信的Tab切換功能的文章就介紹到這了,更多相關Blazor實現(xiàn)微信Tab切換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

  • 使用jquery解析XML的方法

    使用jquery解析XML的方法

    這篇文章主要介紹了使用jquery解析XML的方法,代碼簡潔實用,需要的朋友可以參考下
    2014-09-09
  • JS圖片等比例縮放方法完整示例

    JS圖片等比例縮放方法完整示例

    這篇文章主要介紹了JS圖片等比例縮放方法,結(jié)合完整實例形式分析了javascript針對頁面圖片元素屬性操作的相關技巧,需要的朋友可以參考下
    2016-08-08
  • javascript實現(xiàn)的淘寶旅行通用日歷組件用法實例

    javascript實現(xiàn)的淘寶旅行通用日歷組件用法實例

    這篇文章主要介紹了javascript實現(xiàn)的淘寶旅行通用日歷組件,以實例形式分析了該日歷組件的相關設置及使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-08-08
  • JavaScript Scoping and Hoisting 翻譯

    JavaScript Scoping and Hoisting 翻譯

    希望這篇文章能夠給JavaScript程序員最容易困惑的部分一些啟示。我盡力寫的全面，以免引起更多的困惑。如果我寫錯了或是漏掉了某些重要的東西，請一定讓我知道
    2012-07-07
  • js圖片閃動特效可以控制間隔時間如幾分鐘閃動一下

    js圖片閃動特效可以控制間隔時間如幾分鐘閃動一下

    這篇文章主要介紹一個圖片閃動特效，可以控制間隔時間如幾分鐘閃動一下,需要的朋友不要錯過
    2014-08-08
  • 面試判斷元素是否在可視區(qū)域中IntersectionObserver詳解

    面試判斷元素是否在可視區(qū)域中IntersectionObserver詳解

    這篇文章主要為大家介紹了判斷元素是否在可視區(qū)域中IntersectionObserver面試詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2023-03-03
  • 微信小程序?qū)崿F(xiàn)tab點擊切換

    微信小程序?qū)崿F(xiàn)tab點擊切換

    這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)tab點擊切換，不滑動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-07-07
  • JS 調(diào)試中常見的報錯問題解決方法

    JS 調(diào)試中常見的報錯問題解決方法

    下面小編就為大家?guī)硪黄狫S 調(diào)試中常見的報錯問題解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-05-05
  • 基于JavaScript介紹性能爆表的SolidJS

    基于JavaScript介紹性能爆表的SolidJS

    這篇文章主要介紹了基于JavaScript介紹性能爆表的SolidJS，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下
    2022-09-09
  • JavaScript實現(xiàn)獲取img的原始尺寸的方法詳解

    JavaScript實現(xiàn)獲取img的原始尺寸的方法詳解

    在微信小程序開發(fā)時，它的image標簽有一個默認高度，這樣你的圖片很可能出現(xiàn)被壓縮變形的情況，所以就需要獲取到圖片的原始尺寸對image的寬高設置，本文就來分享一下JavaScript實現(xiàn)獲取img的原始尺寸的方法吧
    2023-03-03

最新評論