Blazor中的页面更改时，Javascript无法工作

Question

我正在Blazor中开发一个项目，但我在javascript方面遇到了问题。

当我第一次编译这个项目时，它运行得很好！

但是当我转到任何一个页面并返回时，滑块(swiperjs(根本不起作用。我还尝试了其他旋转木马，例如：owlCarousel，结果仍然不成功。它只在项目刚构建时工作，在页面导航后不工作。

我在等你的帮助：(

布局页面：

@inherits LayoutComponentBase
@inject IJSRuntime Js
@code {
// OnAfterRenderAsync (I also tried this method)
protected override async Task OnInitializedAsync()
{
await Js.InvokeVoidAsync("import", "https://unpkg.com/swiper/swiper-bundle.min.js");
await Js.InvokeVoidAsync("import", "/custom/js/swiper.js");

}
}
<div class="container">

<div class="p-40">
<h3>slider</h3>
<a href="/">home</a> <a href="/home">page</a>
</div>
@Body
</div>
**I use a slider on my homepage:**
<div class="container">
<div class="row">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="custom/img/slider/slide19.jpg" class="img-responsive" /></div>
<div class="swiper-slide"><img src="custom/img/slider/slide19.jpg" class="img-responsive" /></div>
<div class="swiper-slide"><img src="custom/img/slider/slide19.jpg" class="img-responsive" /></div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</div>

wwroot:index.hmtl

万得国际

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,900italic,900,700italic,700,500italic,500,400italic,300italic,300,100italic,100|Poppins:300,400,700">
<link rel="stylesheet"
href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<style>
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
</style>

正在加载。。。

<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="/custom/js/swiper.js"></script>

Answer 1

如果我没有错的话，Blazor WASM是下载并缓存在浏览器中的。这意味着下次返回页面时，不会再次对其进行初始化。已经是了。

现在，如果您正在尝试使用JavaScript，那么控制转盘将是一个问题。我建议您尝试从blazor项目中清除所有JS，并使用C#。

对于旋转木马，在https://blazorise.com/docs.它运行得很完美。