在Blazor服务器中使用灵活性

debugcn 发表于 Dev

佩塔诺德

我正在尝试在Blazor服务器应用程序中使用flickity js库（https://flickity.metafizzy.co/）。由于某种原因，即使我尝试了许多不同的场景，也无法使它正常工作。

这是现在的样子：

我在_Host.chtml中添加了CSS和javascript文件

<link href="https://npmcdn.com/flickity@2/dist/flickity.css" rel="stylesheet" />

 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
            integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
            crossorigin="anonymous"></script>
 
<script src="https://npmcdn.com/flickity@2/dist/flickity.pkgd.js" crossorigin="anonymous"></script>

我在页面中添加了轮播的代码：

 <div class="main-carousel">
        <div class="carousel-cell">1</div>
        <div class="carousel-cell">2</div>
        <div class="carousel-cell">3</div>

    </div>

然后在_Host.chtml中创建此函数：

 window.initF = () => {
            $('.main-carousel').flickity({
                // options
                cellAlign: 'left',
                contain: true
            });
        }

然后在页面中尝试启动它：

@inject IJSRuntime js

@functions{
    protected async override Task OnAfterRenderAsync(bool firstrender)
    {
        if (firstrender)
        {
            await js.InvokeAsync<object>("initF");

            firstrender = false;
        }
    }
}

但是由于某种原因，它不起作用。

有人知道我想念的是什么？

Umair

这似乎对我来说很好。

我已经在blazor小提琴中尝试过，并从图书馆的网站上获取了CSS，其工作方式与他们那里的演示类似。见附件

您可以从代码中分配firstrender值的一行中删除一行吗，因为这是自动处理的：

protected async override Task OnAfterRenderAsync(bool firstrender)
{
    if (firstrender)
    {
        await js.InvokeAsync<object>("initF");

        // firstrender = false; <- remove this assignment
    }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。