dotNetCore Blazor加载index.razor页面时如何自动执行js事件(非单击事件) [英] How to automatically execute a js event (non-click event) when dotNetCore Blazor loads an index.razor page

问题描述

对不起，每个人，如何进入Index.razor自动执行js事件

使用的轮播插件需要自动执行以下代码

The carousel plugin used needs to automatically execute the following code

function(){
    $("#banner").owlCarousel({
        autoPlay : 3000,
        paginationSpeed : 1000,
        goToFirstSpeed : 2000,
        singleItem : true,
        autoHeight : true,
        navigation: true,
        transitionStyle: 'fade'
    });
}

这种无效的不再需要在子页面中加载事件 _Host.cshtml

Such ineffective no longer should need to load the event in the child page _Host.cshtml

出现一个错误 Index.razor

出现对象引用未设置为对象的实例.

推荐答案

只需创建一个JS互操作函数:

Just create a JS interop function like that :

wwwroot/scripts/interop.js

window.carousel = {
   play: (id, options) => {
     $(id).owlCarousel(options);
   } 
}:

在剃须刀页面或组件中准备好ID为的轮播时启动.

Launch it when your carousel at id is ready in your razor page or component.

Index.razor

@inject IJSRuntime _jsRuntime

<div id="banner"></div>

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
       if (!firstRender)
       {
           return;
       }
       await _jsRuntime.InvokeVoidAsync("carousel.play", "#banner", new
       {
            autoPlay = 3000,
            paginationSpeed = 1000,
            goToFirstSpeed = 2000,
            singleItem = true,
            autoHeight = true,
            navigation = true,
            transitionStyle = "fade"
       });
    }
}

并在_Host.cshtml

And launch your script in the _Host.cshtml

    <script src="scripts/interop.js"></script>

这篇关于dotNetCore Blazor加载index.razor页面时如何自动执行js事件(非单击事件)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！