如何依次显示多个项目

Question

我在剃须刀组件中有一个幻灯片和一个视频。我想依次(一个接一个(显示它们，我的意思是，例如，首先显示幻灯片，然后显示视频，并永远重复，或者是否可以在旋转木马中添加视频。如果有人帮忙，我会很感激的。

这是HTML代码：

@page "/home"

@using Components;
@using System.Collections;
@using System.IO;
@using MimeMapping;
@using Microsoft.AspNetCore.Hosting;

@inject IWebHostEnvironment Environment


<div class="text-center">

<TemplatedCarousel Items="AssetImages" TItem="ImageFile" AutoScrollInterval="5" OnCarouselItemClicked="OnCarouselItemClicked" ShowNavigation="false">
<ItemTemplate>
<img class="d-block center" src="@GetImageSource(@context)" alt="@context.FileName">
</ItemTemplate>
</TemplatedCarousel>
</div>



<div class="text-center">

<video controls="controls" autoplay muted>
<source src="Video/Sample_small.mp4" type="video/mp4" />
</video>
</div>

这里是c#代码：

@code
{ List<ImageFile> AssetImages
{
get
{
List<ImageFile> imagesToReturn = new List<ImageFile>();
var assetFiles = Environment.WebRootFileProvider.GetDirectoryContents("Assets");
foreach (var assetFile in assetFiles)
{
ImageFile imageFile = new ImageFile()
{
FileName = assetFile.Name,
MimeType = MimeMapping.MimeUtility.GetMimeMapping(assetFile.Name)
};
imageFile.FileContent = File.ReadAllBytes(assetFile.PhysicalPath);
imagesToReturn.Add(imageFile);
}
return imagesToReturn;
}
}
private string GetImageSource(ImageFile imageFile)
{
string imageSrc = imageFile.Url;
if (string.IsNullOrEmpty(imageFile.Url) && imageFile.FileContent?.Length > 0)
{
imageSrc = imageFile.Base64Image;
}
return imageSrc;
}
void OnCarouselItemClicked(object sender, int indexClicked)
{
Console.WriteLine($"Carousel Index Clicked: {indexClicked}");
}
}

Answer 1

如果你想在UI片段中循环，你可以做一些类似的事情

@code
{
int state=1;    
}
<button @onclick=@(_=> state = 1 + (++state % 3))>Next</button>
@switch(state)
{
case 1:
<h1>Carousel here</h1>
break;
case 2: 
<h1>Image here</h1>
break;
case 3:
<h1>Video here</h1>
break;
}

按钮只是用来循环状态的——任何事情都可以做到——一个计时器，一些其他的交互/事件。

然后你只需要显示你想为每个状态显示的任何内容

样品：https://blazorfiddle.com/s/tozxddow