如何在Blazor中实现Airbnb风格的轮播指示器

核心逻辑 #

要实现类似Airbnb的最多5个指示器效果，需根据当前激活的图片索引动态计算显示范围：

• 图片总数≤5时，显示全部指示器
• 总数>5时：
  • 确保当前激活指示器在可见范围内
  • 非边界场景显示当前索引前后各2个指示器
  • 边界场景（当前为前2个或后2个索引）固定显示前5个或后5个指示器

Blazor代码实现 #

1. 添加范围计算逻辑 #

在组件的@code块中添加计算可见指示器索引的方法：

@code {
    private List<string> Imgs = new(); // 你的图片集合
    private int currentImage = 0; // 当前激活的图片索引

    private IEnumerable<int> GetVisibleDotIndices()
    {
        int totalImages = Imgs.Count;
        if (totalImages <= 5)
        {
            return Enumerable.Range(0, totalImages);
        }

        int start = Math.Max(0, currentImage - 2);
        int end = Math.Min(totalImages - 1, currentImage + 2);

        // 处理边界情况
        if (start == 0)
        {
            end = 4;
        }
        else if (end == totalImages - 1)
        {
            start = totalImages - 5;
        }

        return Enumerable.Range(start, end - start + 1);
    }
}

2. 更新UI渲染代码 #

替换原有的循环渲染逻辑，改为使用计算出的可见索引：

<span class="progress-dots">
    @foreach (int i in GetVisibleDotIndices())
    {
        <span class='progress-dot @(currentImage == i ? "active" : "")'
              @onclick="() => currentImage = i">
        </span>
    }
</span>

可选优化：添加省略号 #

如果需要模拟Airbnb的省略号效果（非边界时显示前后省略标记），可以修改UI并补充CSS：

修改后的UI代码 #

<span class="progress-dots">
    @if (currentImage > 2)
    {
        <span class="progress-dot ellipsis">...</span>
    }

    @foreach (int i in GetVisibleDotIndices())
    {
        <span class='progress-dot @(currentImage == i ? "active" : "")'
              @onclick="() => currentImage = i">
        </span>
    }

    @if (currentImage < Imgs.Count - 3)
    {
        <span class="progress-dot ellipsis">...</span>
    }
</span>

补充CSS样式 #

.progress-dot.ellipsis {
    background: transparent;
    color: rgba(174, 174, 174, 0.453);
    width: auto;
    height: auto;
    margin: 0 0.1rem;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    cursor: default;
}

内容的提问来源于stack exchange，提问作者Axekan