代码之家 › 专栏 › 技术社区 › David Thielen

MudCaroousel-滑动到下一个/上一个,然后无声地替换列表

mudblazor blazor-server-side blazor

David Thielen · 技术社区 · 2 年前

我正在尝试使用 <MudCarousel> 以提供类似火绒的体验。为了做到这一点,我用板条箱 MudCarousel.ItemsSource 那是一个 List<MyItems> 其中列表内容最初为:[Item1,Item0,Item1],并设置“SelectedIndex=1”。

然后,当他们向任意一个方向滑动时,他们会从项目0转到项目1。然后,我使用[Item2,Item1,Item2]重建列表,并调用 MudCarousel.MoveTo(1);

这一切都很好。但从视觉上看,我无法正确地将其滑动到新项目。有时它会跳,有时它只是跳。然后,当我更新ItemsSource时,有时内容会重新呈现。

所以我的问题是,在 MudCarousel.SelectedIndexChanged 方法,如何处理此问题:

在向左/向右滑动/单击时,上一个/下一个项目是否会滑入页面?
当我更新ItemsSource内容并调用MoveTo(1)时,它意识到这就是显示的内容,因此不进行额外的渲染?

0 回复 | 直到 2 年前

RBee 2 年前

我想你可能不得不拖延时间。

您至少需要1毫秒 await Task.Delay(1) 在selectedIndex被更改后,然而对于carousel UX,我发现100-200效果最好。

<MudCarousel SelectedIndex="selectedIndex" SelectedIndexChanged="HandleIndexChanged">
    <ItemTemplate>
    <!--  -->
    </ItemTemplate>
</MudCarousel>

async Task HandleIndexChanged(int newIndex)
{
    selectedIndex = newIndex;
    await Task.Delay(200);
    if (newIndex != 1)
    {
        await ReBuildItems();
    }
    _carousel.MoveTo(1);
}

MudBlazor snippet

推荐文章

Ahmad Salim · 客户端。NET 8 web应用服务器双向绑定未绑定到模型,事件未被触发

1 年前

Frawsty · 上传到Azure存储Blob的文件显示大小为0字节

2 年前

rekcul · Urlweb应用程序(Linux宿主):路径必须是绝对路径。(参数“root”)

2 年前

John D · JsonQuickGrid TemplateColumn出现编译错误

2 年前

max · Blazor Web应用程序中的计时器不工作

2 年前

Dev · 如何在mudselect中使用ValueChanged

2 年前

user101289 · blazor是否具有与窗口会话相关联的唯一ID

2 年前

sada · Blazor Server应用程序和Azure Entra ID授权(按角色)

2 年前

Steve French · 有没有一种方法可以使用.net 8从blazor服务器中C#中的存储过程中填充复杂对象的列表?

2 年前

TitanSloth · 交互式渲染或更新On Control

2 年前