如何轮流显示多个项目答案

【问题标题】：How to display many items in turns如何轮流显示多个项目
【发布时间】：2020-07-17 09:10:40
【问题描述】：

我在剃须刀组件中有幻灯片和视频。我想依次显示它们（一个接一个）我的意思是例如首先显示幻灯片，然后显示视频并永远重复，或者是否可以在轮播中添加视频。如果有人提供帮助，我将不胜感激。

这是 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}");
    }

}

【问题讨论】：

这是基于时间还是其他？你已经有了一个旋转木马——为什么不把所有东西都放进去呢？
我已经把图片放到了轮播中，我的项目中有一个名为 Assets 的文件夹，因为图片在那里。我只是想将轮播、视频和图片一张一张地展示出来，而不是全部放在一起。
对，但是您有一个轮播组件可以做到这一点。为什么不使用它？
我做了，但视频没有显示在轮播中，我将视频设置在 Assets 文件夹中。它显示一个空框架并更改为另一张幻灯片。
轮播组件 - 是你的还是来自 nuget？它可以接受<Item> 标记吗 - 我假设它可以，并且您可以将三个“东西”包裹在一个外部轮播中 - 在它们之间切换<TemplatedCarousel><Item #1><TemplatedCarousel of images></Item #1><Item #2><img thing></Item #2><Item #3><Video thing></Item #3></TemplatedCarousel> 作为粗略指南

标签： c# .net razor visual-studio-2019 blazor

【解决方案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

【讨论】：