loading-animation 相关问题


AnimationSet 未按预期执行顺序动画

如果我手动执行多个连续动画。它按预期工作。这是我的可行代码 扩展.xml 如果我手动执行多个连续动画。它按预期工作。这是我的可行代码 scale_up.xml <?xml version="1.0" encoding="utf-8"?> <scale xmlns:android="http://schemas.android.com/apk/res/android" android:fromXScale="1.0" android:fromYScale="1.0" android:toXScale="1.1" android:toYScale="1.1" android:pivotX="50%" android:pivotY="50%" android:fillAfter="true" android:interpolator="@android:anim/decelerate_interpolator" android:duration="@android:integer/config_shortAnimTime" /> scale_down.xml <?xml version="1.0" encoding="utf-8"?> <scale xmlns:android="http://schemas.android.com/apk/res/android" android:fromXScale="1.1" android:fromYScale="1.1" android:toXScale="1.0" android:toYScale="1.0" android:pivotX="50%" android:pivotY="50%" android:fillAfter="true" android:interpolator="@android:anim/decelerate_interpolator" android:duration="@android:integer/config_shortAnimTime" /> 手动执行连续动画 public void startAnimation(Button button) { // Define the scale up animation Animation scaleUpAnimation = AnimationUtils.loadAnimation(this, R.anim.scale_up); // Define the scale down animation Animation scaleDownAnimation = AnimationUtils.loadAnimation(this, R.anim.scale_down); scaleUpAnimation.setAnimationListener(new Animation.AnimationListener() { @Override public void onAnimationStart(Animation animation) { } @Override public void onAnimationEnd(Animation animation) { button.startAnimation(scaleDownAnimation); } @Override public void onAnimationRepeat(Animation animation) { } }); button.startAnimation(scaleUpAnimation); } 结果 但是,如果我尝试使用 AnimationSet 替换上述代码,动画结果就会损坏。 public void startAnimation(Button button) { // Define the scale up animation Animation scaleUpAnimation = AnimationUtils.loadAnimation(this, R.anim.scale_up); // Define the scale down animation Animation scaleDownAnimation = AnimationUtils.loadAnimation(this, R.anim.scale_down); // Create an AnimationSet to combine both animations // (It makes no difference whether I am using true or false) AnimationSet animationSet = new AnimationSet(true); animationSet.addAnimation(scaleUpAnimation); animationSet.addAnimation(scaleDownAnimation); // Apply the animation to the button button.startAnimation(animationSet); } 使用AnimationSet的结果(动画不流畅) 我可以知道为什么AnimationSet不起作用吗?谢谢。 我们需要使用setStartOffset来延迟第二个动画的执行。这是解决上述问题的完整代码片段。 public void startAnimation(Button button) { int config_shortAnimTime = getResources().getInteger(android.R.integer.config_shortAnimTime); // Define the scale up animation ScaleAnimation scaleUpAnimation = new ScaleAnimation( 1f, 1.02f, 1f, 1.02f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f ); scaleUpAnimation.setInterpolator(new DecelerateInterpolator()); scaleUpAnimation.setDuration(config_shortAnimTime); scaleUpAnimation.setFillAfter(true); // Define the scale down animation ScaleAnimation scaleDownAnimation = new ScaleAnimation( 1.02f, 1f, 1.02f, 1f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f ); scaleDownAnimation.setInterpolator(new AccelerateInterpolator()); scaleDownAnimation.setDuration(config_shortAnimTime); scaleDownAnimation.setFillAfter(true); scaleDownAnimation.setStartOffset(scaleUpAnimation.getDuration()); // Create an AnimationSet to combine both animations AnimationSet animationSet = new AnimationSet(false); animationSet.addAnimation(scaleUpAnimation); animationSet.addAnimation(scaleDownAnimation); // Apply the animation to the button button.startAnimation(animationSet); }


角度 *ngIf; else 在异步上,当未定义是来自 Observable 的有效值时

我正在尝试使用 *ngIf; else 上的可观察对象可以发出未定义的信号。这是我所拥有的 我正在尝试使用 *ngIf; else 上的可观察对象可以发出未定义的信号。这是我有的 <span *ngIf="(content$ | async) as content; else loading"> <span *ngIf="content != undefined; else notFound"> // show content </span> </span> 问题在于,如果observable的值未定义,页面会一直显示#loading,并且不会切换到#notFound 有没有办法接受 undefined(可以改为 null)作为有效的输出值,并让 UI 在不同阶段显示相应的部分? 因为 Boolean(undefined) 的计算结果为 false,内部条件 content !== undefined 始终为 true 并且 notFound 永远不会加载。 您将需要更改您的应用程序逻辑。 处理此类场景的最简单方法似乎是使用 ngrxLet : <ng-container *ngrxLet="content$ as content; suspenseTpl: loading"> <span *ngIf="!content"> <h2>Not found!</h2> </span> <span *ngIf="content"> {{ content }} </span> </ng-container> <ng-template #loading> Loading... </ng-template>


改变引用类型不适用于 .animation(_:value:)

当要变异的值是引用类型时,如何对视图进行动画更改? 在下面的示例中,更改提醒时间会更新顺序,但没有动画。 我以为数组是


<Table> 我正在尝试在我的应用程序中创建一个挂钩,但是当更新包含信息的常数时,屏幕上显示列表的组件不会再次渲染,但是列表已更新,因为挂钩返回它在控制台中更新(值得一提的是,首次加载组件时,它会正确渲染,但是当信息更改时,它不会更新)。

import React, { use, useState, useEffect } from 'react'; import { Table } from 'antd'; import UpdateList from '../hooks/updateList'; const SalesList = () => { const { list, loading, error, updateList } = UpdateList(); useEffect(() => { updateList(); }, []); /* If I add updateList within the [], it works, but it enters an infinite loop */ useEffect(() => { console.log('List updated in the component:', list); }, [list]); const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', }, { title: 'Price', dataIndex: 'price', key: 'price', }, { title: 'Quantity', dataIndex: 'quantity', key: 'quantity', }, { title: 'Amount Received', dataIndex: 'amountReceived', key: 'amountReceived', }, ]; if (loading) return <div>Loading...</div>; if (error) return <div>Error: {error.message}</div>; return <Table dataSource={list} columns={columns} rowKey="ID" />; }; export default SalesList;


React中react-router-dom最新版本如何实现延迟加载

我想使用Typescript在React中实现延迟加载。我收到打字稿错误。 常量应用程序 = () => { 返回 ( 我想使用 Typescript 在 React 中实现延迟加载。我收到打字稿错误。 const App = () => { return ( <RouterProvider router={createBrowserRouter( createRoutesFromElements( <Route> <Route path="/" element={<Outlet/>}> <Route index element={<Home />} /> <Route path="contact" element={<Contact />} /> <Route path="about" element={<About />} /> <Route path="*" element={<Navigate to="/" replace />} /> </Route> </Route> ) )} /> ) }; export default App; 下面的代码不起作用 <Route> <Route path="/" element={<Outlet/>}> <Route index lazy={() => import("./Home")} /> <Route path="contact" lazy={() => import("./Contact")} /> <Route path="about" lazy={() => import("./About")} /> <Route path="*" element={<Navigate to="/" replace />} /> </Route> </Route> const Home= lazy(() => import("./screens/home")); const About= lazy(() => import("./screens/about")); <Route> <Route path="/" element={<Outlet/>}> <Route index element={<Suspense fallback={<div>Loading...</div>}> <Home/> </Suspense> /> } /> <Route path="about" element={<Suspense fallback={<div>Loading...</div>}> <About/> </Suspense> /> } /> <Route path="*" element={<Navigate to="/" replace />} /> </Route> </Route>


仅在页面底部添加边距

我有一个始终固定在视图底部的 cookie 部分。 啦啦啦啦 我有一个始终固定在视图底部的 cookie 部分。 <section id="cookie-section"> <span id="cookie-text">Bla bla bla</span> </section> #cookie-section { min-height: 50px; width: 100%; position: fixed; display: flex; bottom: 0; background-color: rgba(38, 38, 38, 0.9); } 但是当你滚动并到达页面底部时,我想为其添加 50px 的 margin-bottom 。我该怎么做? 当你只是添加 margin-bottom: 50px; 到它时,它已经在开始时获得了我不想要的边距。仅当您滚动到达页面底部时。 可以使用滚动驱动动画,但支持还不好。 您可以使用 Google Chrome 测试以下内容 #cookie-section { min-height: 50px; inset: auto 0 0; position: fixed; display: flex; background-color: rgba(38, 38, 38, 0.9); color: #fff; animation: margin 2s; animation-timeline: scroll(root) } @keyframes margin { 0%,90% {margin-bottom:0;} 100% {margin-bottom:50px;} } body { min-height: 300vh; } <section id="cookie-section"> <span id="cookie-text">Bla bla bla</span> </section>


Angular Material 2:修复多行错误消息

我在我的角度应用程序中使用角度材料2。当我的表单输入字段错误消息超过一行时,我遇到了问题。这是照片: 这是代码: 我在我的角度应用程序中使用角度材料 2。当我的表单输入字段错误消息超过一行时,我遇到了问题。这是照片: 这是代码: <md-error *ngIf="password.touched && password.invalid"> <span *ngIf="password.errors.required"> {{'PASSWORD_RECOVERY.FIELD_REQUIRED' | translate}} </span> <span *ngIf="password.errors.minlength || password.errors.maxlength"> {{'PASSWORD_RECOVERY.PASSWORD_LENGTH' | translate}} </span> <span *ngIf="password.errors.pattern"> {{'PASSWORD_RECOVERY.FOR_A_SECURE_PASSWORD' | translate}} </span> </md-error> 我通过阅读 github 了解到,这是 Angular 2 材料中的一个错误。有人通过自定义解决方法成功解决了这个问题吗? 问题是类为 .mat-form-field-subscript-wrapper 的元素是 position: absolute,所以它不占用实际空间。 按照 xumepadismal 在 github 上关于此问题的建议,您可以添加此 scss 作为解决我的问题的解决方法: // Workaround for https://github.com/angular/material2/issues/4580. mat-form-field .mat-form-field { &-underline { position: relative; bottom: auto; } &-subscript-wrapper { position: static; } } 它会转换静态 div 中的 .mat-form-field-subscript-wrapper 节点,并将 .mat-form-field-unterline 重新定位在输入字段之后。 正如材料 15 中在 github 讨论中提到的,可以通过将 subscriptSizing="dynamic" 添加到 mat-form-field 来解决问题。 要更改默认行为,您必须使用以下选项更新 angular.module.ts 提供程序: providers: [ { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { subscriptSizing: 'dynamic' } } ] 这也可以在材料文档中找到 使用@mattia.corci提出的解决方案会导致错误消息被推到底部太多,从而在顶部留下不必要的空白空间。 使用 Tailwind CSS,这个解决方案对我来说适用于最新的 Angular 17: .mat-mdc-form-field { @apply w-full self-start; .mat-mdc-form-field-subscript-wrapper { @apply flex; .mat-mdc-form-field-error-wrapper { @apply static; } } } mat-form-field.ng-invalid.ng-touched { animation: example; animation-duration: 0.3s; margin-bottom: 20px; } @keyframes example { from { margin-bottom: 0; } to { margin-bottom: 20px; } } 它对我有用。


Angular 材质选项卡 - 响应式选项卡更改

我在 mat-tab-group 中有两个选项卡: 我在 mat-tab-group 中有两个选项卡: <mat-tab-group animationDuration="0ms" [disablePagination]="false" mat-stretch-tabs="false" mat-align-tabs="start" > <mat-tab label="First tab"> <ng-template matTabContent> <app-first-tab /> </ng-template> </mat-tab> <mat-tab label="Second tab"> <ng-template matTabContent> <app-second-tab /> </ng-template> </mat-tab> </mat-tab-group> 在第一个选项卡上,我生成了很多组件,因此需要一些时间才能完全渲染。 当我选择第二个选项卡并返回第一个选项卡时,应用程序会冻结(几秒钟),直到所有内容都呈现出来。 是否可以显示例如。标题(它的更多-更少的静态),一些微调器,当所有内容都渲染时,隐藏微调器?或者让用户以某种方式知道发生了什么事? 示例:https://stackblitz.com/edit/stackblitz-starters-sb2saw ..仅用于测试目的。 非常感谢。 您遇到的问题有两个部分: 您的异步请求的模拟实际上是使用同步函数(for循环),该函数在访问服务时正在运行。这不是标准 Observable 在野外的工作方式,也是选项卡之间漫长等待的根源。 您可以利用容器和模板在加载异步变量时显示加载微调器。 HTML 示例: <ng-container *ngIf="data$ | async as data; else loading"> <table> <thead> <th>ID</th> <th>Code</th> <th>Buttons</th> </thead> <tbody> <tr *ngFor="let item of data"> <td>{{ item.id }}</td> <td>{{ item.code }}</td> <td> @for (idx of buttonCount; track idx; let index = $index) { <button>{{ idx }}</button> } </td> </tr> </tbody> </table> </ng-container> <ng-template #loading><mat-spinner></mat-spinner></ng-template> 更新了服务以更好地模拟异步数据(也可以作为 Observable 共享): async fetchData(): Promise<ApiModel[]> { let result: ApiModel[] = []; for (let i = 1; i <= this.cnt; i++) { result.push({ id: i, code: `item_${i}` }); } return new Promise((resolve, reject) => { setTimeout(() => resolve(result), Math.random() * 5000); }); } 结果是立即交换选项卡,在加载数据时显示一个微调器图标: StackBlitz 叉子链接


如何防止图片被下载到手机上?

假设这个标记: 假设这个标记: <picture> <source media="(max-width: 767px)" srcset="//placehold.it/350x150&text=Up+to+767" /> <source media="(max-width: 991px)" srcset="//placehold.it/350x150&text=Up+to+991" /> <img src="//placehold.it/570x200&text=Desktop+image" class="responsive-image" /> </picture> 是否可以在不使用 JavaScript 的情况下防止在小型设备上下载“最多 767”图像?虽然以下CSS将隐藏图像,并且似乎已经在视觉上解决了问题: @media (max-width: 767px) { .responsive-image { display: none; } } 它仍然会下载图像,这是我想避免的。我希望我可以简单地为我想要隐藏的图像提供一个空的 srcset 属性,但随后会加载下一个图像。 小提琴:https://jsfiddle.net/n68ousqu/ 我没有足够的声誉点来评论@MiscellaneousUser,但看来,至少在 Chrome 中,您可以从我原来的帖子中获取 HTML 和 CSS,然后只需将 loading="lazy" 添加到 img 元素即可获得这个工作。


将 props 传递给 nextjs 中的页面组件

我正在使用 nextjs 的 withlayout 函数为某些页面添加侧边栏。 导出类型 PageWithLayout = NextPage & { withLayout?:(页面:ReactElement)=> 我正在使用 nextjs 的 withlayout 函数为某些页面添加侧边栏。 export type PageWithLayout<P = {}, IP = P> = NextPage<P, IP> & { withLayout?: (page: ReactElement) => ReactNode; }; 这是我的使用方法: export const Interactions: PageWithLayout = () => { const [ getInteractions, { data: interactionData, fetchMore, variables, loading: isInteractionsLoading, error: isInteractionsError, }, ] = useGetInteractionsLazyQuery({ notifyOnNetworkStatusChange: true, fetchPolicy: "network-only", ssr: false, }); return ( <> <Box height={"100vh"}> </Box> </> ); }; Interactions.withLayout = (page: ReactElement) => { // how do I pass isInteractionsLoading as a prop to this component return <Layout>{page}</Layout>; }; export default Interactions; 我想要实现的是将 isInteractionsLoaded 和 isInteractionsError 作为属性传递给我的布局组件,以便我可以渲染这些状态。有没有一种方法可以实现此目的,而无需将布局组件移动到页面组件内? 创建一个包装组件的 React Context 提供程序可能是您使用的解决方案,如果您不想使用任何其他包或不想使用 redux 等更强大的工具,则可以使用。 但是在这里使用有点尴尬,具体取决于包含交互的组件树是什么样子。否则可以根据您的需要使用 _app 入口点。 示例上下文和用法 import React from 'react'; export const InteractionContext = React.createContext({ isInteractionsLoading: false, isInteractionsError: null, }); // parent component or _app if necessary const ProviderComponent = () => { return ( <InteractionContext.Provider value={{ isInteractionsLoading, isInteractionsError }}> <Interactions /> </InteractionContext.Provider> ); }; const Layout = ({ children }) => { const { isInteractionsLoading, isInteractionsError } = useContext(InteractionContext); // Now you can use isInteractionsLoading and isInteractionsError here // ... return <div>{children}</div>; };


使用多个翻译和持续时间偏移重复 Android 动画

我想要一个可以无限上下移动图像的动画。但是,当我运行代码时,动画仅发生一次。这是动画 xml: 我想要一个可以无限上下移动图像的动画。但是,当我运行代码时,动画仅发生一次。这是动画 xml: <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/linear_interpolator" android:repeatCount="3" android:repeatMode="restart"> <!-- move down --> <translate android:fromYDelta="0%" android:toYDelta="50%" android:duration="1500" android:fillAfter="true"/> <!-- move up --> <translate android:fromYDelta="0%" android:startOffset="1500" android:toYDelta="-50%" android:duration="1500" android:fillAfter="true"/> <!-- continue to move up --> <translate android:fromYDelta="0%" android:startOffset="3000" android:toYDelta="-20%" android:duration="600" android:fillAfter="true"/> <!-- down to original pos --> <translate android:fromYDelta="0%" android:startOffset="3600" android:toYDelta="20%" android:duration="600" android:fillAfter="true"/> </set> 这是我的java代码: public class MainActivity extends AppCompatActivity { Animation move1, move2, move3, move4, move5; Button login; ImageView bar1, bar2, bar3, bar4, bar5; int delay1 = 500; int delay2 = 1560; int delay3 = 2300; int delay4 = 3065; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); EdgeToEdge.enable(this); setContentView(R.layout.activity_main); login = findViewById(R.id.btLogin); bar1 = findViewById(R.id.ivBar1); bar2 = findViewById(R.id.ivBar2); bar3 = findViewById(R.id.ivBar3); bar4 = findViewById(R.id.ivBar4); bar5 = findViewById(R.id.ivBar5); move1= AnimationUtils.loadAnimation(getApplicationContext(),R.anim.move); move2= AnimationUtils.loadAnimation(getApplicationContext(),R.anim.move); move3= AnimationUtils.loadAnimation(getApplicationContext(),R.anim.move); move4= AnimationUtils.loadAnimation(getApplicationContext(),R.anim.move); move5= AnimationUtils.loadAnimation(getApplicationContext(),R.anim.move); bar1.startAnimation(move1); Handler handler = new Handler(); handler.postDelayed(() -> bar2.startAnimation(move2), delay1); handler.postDelayed(() -> bar3.startAnimation(move3), delay2); handler.postDelayed(() -> bar4.startAnimation(move4), delay3); handler.postDelayed(() -> bar5.startAnimation(move5), delay4); ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> { Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars()); v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom); return insets; }); } } 为什么它不无限重复?和xml中的fill-after属性有关系吗?非常感谢您的帮助,这是一个班级项目。 从动画 XML 中删除 android:fillAfter="true",并在父 android:repeatCount="infinite" 标记中设置 <set>,而不是 repeatCount="3"。 fillAfter 使每个动画保持其最终状态,防止正确循环。 <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/linear_interpolator" android:repeatCount="infinite" android:repeatMode="restart"> <!-- move down --> <translate android:fromYDelta="0%" android:toYDelta="50%" android:duration="1500"/> <!-- move up --> <translate android:fromYDelta="50%" android:startOffset="1500" android:toYDelta="-50%" android:duration="1500"/> <!-- continue to move up --> <translate android:fromYDelta="-50%" android:startOffset="3000" android:toYDelta="-20%" android:duration="600"/> <!-- down to original pos --> <translate android:fromYDelta="-20%" android:startOffset="3600" android:toYDelta="0%" android:duration="600"/> </set> 这就是让它无限循环所需的全部。


按照路径流对 svg 填充进行动画处理

我有以下SVG;它类似于字母“P”。我想用黑色填充整个“P”,但要逐渐地遵循绘图的流程,就像正在绘制一样。 我有以下SVG;它类似于字母“P”。我想用黑色填充整个“P”,但要逐渐地遵循绘图的流程,就像正在绘制一样。 <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <g stroke="#000" stroke-width="1" fill="none"> <path d="M31.5294 14.2118C31.5294 18.8819 28.7623 22.9082 24.7793 24.7351C26.4612 23.3496 27.5322 21.248 27.5322 18.896C27.5322 14.7642 24.2259 11.4042 20.112 11.3205C20.0574 11.3167 20.0075 11.3167 19.9529 11.3167C19.8983 11.3167 19.8485 11.3167 19.7939 11.3205C18.2673 11.4033 17.0588 12.6663 17.0588 14.2108V28.6814C17.0588 33.4748 13.1699 37.3638 8.37646 37.3638V14.2118C8.37646 7.81928 13.5605 2.63528 19.9529 2.63528C26.3454 2.63528 31.5294 7.81928 31.5294 14.2118Z"/> </g> </svg> 如果我只是从下到上或从左到右填充,其他类似问题的解决方案,它不会遵循绘制时的“P”形状。请注意:我对 SVG 没有太多专业知识。 我举了一个例子来说明如何做到这一点。我知道这可能不完全是您想要的,但这说明了一条可以遵循的道路。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <style> @keyframes fade-in-right { from { clip-path: circle(0px); } to { clip-path: circle(40px); } } #path2 { animation: fade-in-right ease 4s infinite; } </style> <g stroke="#000000" stroke-width="1" fill="none" id="g1"> <path d="m 31.5294,14.2118 c 0,4.6701 -2.7671,8.6964 -6.7501,10.5233 1.6819,-1.3855 2.7529,-3.4871 2.7529,-5.8391 0,-4.1318 -3.3063,-7.4918 -7.4202,-7.5755 -0.0546,-0.0038 -0.1045,-0.0038 -0.1591,-0.0038 -0.0546,0 -0.1044,0 -0.159,0.0038 -1.5266,0.0828 -2.7351,1.3458 -2.7351,2.8903 v 14.4706 c 0,4.7934 -3.8889,8.6824 -8.68234,8.6824 v -23.152 c 0,-6.39252 5.18404,-11.57652 11.57644,-11.57652 6.3925,0 11.5765,5.184 11.5765,11.57652 z" id="path1" /> </g> <g stroke="#000000" stroke-width="1" fill="none" id="g2"> <path d="m 31.5294,14.2118 c 0,4.6701 -2.7671,8.6964 -6.7501,10.5233 1.6819,-1.3855 2.7529,-3.4871 2.7529,-5.8391 0,-4.1318 -3.3063,-7.4918 -7.4202,-7.5755 -0.0546,-0.0038 -0.1045,-0.0038 -0.1591,-0.0038 -0.0546,0 -0.1044,0 -0.159,0.0038 -1.5266,0.0828 -2.7351,1.3458 -2.7351,2.8903 v 14.4706 c 0,4.7934 -3.8889,8.6824 -8.68234,8.6824 v -23.152 c 0,-6.39252 5.18404,-11.57652 11.57644,-11.57652 6.3925,0 11.5765,5.184 11.5765,11.57652 z" id="path2" style="fill:#000000;fill-opacity:1;stroke:none" /> </g> </svg> </body> </html>


带有使用 requireJS 的 javascript 模块的 Flutter Web 项目(Flutter Web 中的 Monaco 编辑器)

我正在尝试在 Flutter Web 中使用 Monaco 编辑器。 我看到的最简单的方法是同步加载所有资源示例。 这是一个独立的 html 文件: 我正在尝试在 Flutter Web 中使用 Monaco 编辑器。 我看到的最简单的方法是同步加载所有资源示例。 这是一个独立的 html 文件: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" data-name="vs/editor/editor.main" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs/editor/editor.main.css" /> <style> @font-face { font-family: "codicon", src: url("https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs/base/browser/ui/codicons/codicon.ttf") format("truetype") } </style> <title>Monaco</title> </head> <body> <h2>Monaco Editor Sync Loading Sample</h2> <div id="code" style="width: 800px; height: 600px; border: 1px solid grey"></div> <script> var require = { paths: { vs: "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs" } }; </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs/loader.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs/editor/editor.main.nls.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs/editor/editor.main.js"></script> <script> var editor = monaco.editor.create(document.getElementById("code"), { value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'), language: "javascript", additionalCssClassName: "code" }); </script> </body> </html> 我的问题是:如何修改示例 Flutter Web 项目的 index.html 文件,以便加载所有必需的资源?线路好像有问题 var require = { paths: { vs: "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs" } }; 因为 flutter 构建永远不会完成(卡在某个地方。)我看到 Flutter 本身使用 requirejs,并且可能存在我不知道如何解决的冲突。 如果您知道如何执行此操作,请发布一个 Fluter Web index.html 文件,该文件加载编辑器所需的所有 js 文件。 谢谢你, T https://github.com/Hua777/flutter_monaco_editor 我已经大致完成了flutter版的monaco编辑器。 但还不完美,希望对你有帮助。


如何使用 JS 延迟加载新的 Google Adsense 代码

谷歌已取代 <question vote="1"> <p>谷歌已取代 <br/></p> <p><pre><code>&lt;script async src=&#34;https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&lt;/script&gt;</code></pre> <br/></p> <p>与<br/></p> <p><pre><code>&lt;script async src=&#34;https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456&#34; crossorigin=&#34;anonymous&#34;&lt;/script&gt;</code></pre> <br/></p> <p><strong>参考</strong>:<a href="https://support.google.com/adsense/answer/10627874" rel="nofollow noreferrer">Google Adsense 公告</a><br/></p> <p><strong>旧的 Adsense 代码就像:</strong></p> <pre><code>&lt;script async src=&#34;https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX&#34; crossorigin=&#34;anonymous&#34;&gt;&lt;/script&gt; &lt;ins class=&#34;adsbygoogle&#34; style=&#34;display:inline-block;width:350px;height:90px&#34; data-ad-client=&#34;ca-pub-XXXXXXXXXXXXXXXX&#34; data-ad-slot=&#34;XXXXXXXXXX&#34;&gt;&lt;/ins&gt; &lt;script&gt; (adsbygoogle = window.adsbygoogle || []).push({}); &lt;/script&gt; </code></pre> <p><strong>新的 Adsense 代码如下:</strong></p> <pre><code>&lt;script async src=&#34;https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX&#34; crossorigin=&#34;anonymous&#34;&gt;&lt;/script&gt; &lt;ins class=&#34;adsbygoogle&#34; style=&#34;display:inline-block;width:350px;height:90px&#34; data-ad-client=&#34;ca-pub-XXXXXXXXXXXXXXXX&#34; data-ad-slot=&#34;XXXXXXXXXX&#34;&gt;&lt;/ins&gt; &lt;script&gt; (adsbygoogle = window.adsbygoogle || []).push({}); &lt;/script&gt; </code></pre> <p><strong>页面加载完成后加载广告的旧 JS 代码是:</strong></p> <pre><code> &lt;script type=&#34;text/javascript&#34;&gt; function downloadJSAtOnload() { var element = document.createElement(&#34;script&#34;); element.src = &#34;https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&#34;; document.body.appendChild(element); } if (window.addEventListener) window.addEventListener(&#34;load&#34;, downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent(&#34;onload&#34;, downloadJSAtOnload); else window.onload = downloadJSAtOnload; &lt;/script&gt; </code></pre> <p>由于在新广告代码的脚本标签中添加了<pre><code>?client=ca-pub-xxxxxx&#34; crossorigin=&#34;anonymous&#34;</code></pre>,那么现在加载广告的新JS代码是什么?</p> </question> <answer tick="true" vote="1"> <p>嗯,这并不是真正的延迟加载,这是延迟加载,不推荐,但你就可以了</p> <pre><code>&lt;script&gt; function downloadJSAtOnload() { var element = document.createElement(&#34;script&#34;); element.src = &#34;https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX&#34;; element.async = true; element.setAttribute(&#39;crossorigin&#39;, &#39;anonymous&#39;); document.body.appendChild(element); } if (window.addEventListener) window.addEventListener(&#34;load&#34;, downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent(&#34;onload&#34;, downloadJSAtOnload); else window.onload = downloadJSAtOnload; &lt;/script&gt; </code></pre> <p>如果您正在寻找延迟加载 AdSense,请查看 <a href="https://www.guest.blog/post/12068/lazy-loading-adsense-ads/" rel="nofollow noreferrer">延迟加载 Adsense</a></p> </answer> <answer tick="false" vote="0"> <blockquote> <h2>引用的标题##<script async</h2> <p>src="https://pagead2.googlesyndicate.com/pagead/js/adsbygoogle.js?client=ca-pub-1049121221402917" 跨桥=“匿名”></p> </blockquote> </answer> </body></html>


最新问题
© www.soinside.com 2019 - 2024. All rights reserved.