时间戳

首页 > 解决方案 > Blazor Wasm 中不同屏幕尺寸的事件处理

javascript - Blazor Wasm 中不同屏幕尺寸的事件处理

问题描述

Blazor WASM 客户端应用程序需要在 Web 浏览器屏幕上具有某些菜单项的悬停事件，并在平板电脑大小的屏幕上具有单击事件。为了接收浏览器屏幕宽度，使用 js 互操作和额外的浏览器服务（类似于https://blazor.tips/blazor-how-to-ready-window-dimensions/中的方法）来获取宽度并对事件处理应用条件。但是，如果此 Blazor 应用程序最初是在 Web 浏览器上加载的（例如 >1000 像素的屏幕具有悬停事件）并且当调整为标签宽度时（例如 <992 像素的屏幕具有相同菜单的点击事件），则页面需要刷新才能重新在调整到剃刀组件的大小后渲染宽度。

是否有任何替代方法可以将屏幕宽度的动态变化读入 Blazor 应用程序中的组件？

注意：有一种方法可以使用 BlazorPro 检测屏幕尺寸。BlazorSize 包https://github.com/EdCharbeneau/BlazorSize 但不幸的是，它对我不起作用

标签： javascriptblazor-webassemblyblazor-jsinterop

解决方案

避免此问题的一种方法是在来自 Blazor 的按钮单击事件中进行同步 js 调用（通过使用 IJSInProcessRuntime）（通常 JSRuntime 是一种异步方法），这样屏幕上就不会有任何等待时间来查看结果.

检查如何在以下链接中同步调用 JavaScript 函数 https://docs.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-3.1#invoke-net -methods-from-javascript-functions

https://docs.microsoft.com/en-us/aspnet/core/blazor/webassembly-performance-best-practices?view=aspnetcore-5.0

https://www.meziantou.net/optimizing-js-interop-in-a-blazor-webassembly-application.htm

推荐阅读