如何在 NativeScript Vue 中使用类似 SVG 的内容加载器？

Question

我使用 NativeScript Vue 并想在我的组件中显示加载动画，例如 https://github.com/egoist/vue-content-loader。

不幸的是，vue-content-loader 包不适用于 NativeScript，因为它使用视图中不支持的 SVG 元素。

<template>
  <content-loader
    :height="160"
    :width="400"
    :speed="2"
    primaryColor="#f3f3f3"
    secondaryColor="#ecebeb"
  >
    <rect x="70" y="15" rx="4" ry="4" width="117" height="6.4" /> 
    <rect x="70" y="35" rx="3" ry="3" width="85" height="6.4" /> 
    <rect x="0" y="80" rx="3" ry="3" width="350" height="6.4" /> 
    <rect x="0" y="100" rx="3" ry="3" width="380" height="6.4" /> 
    <rect x="0" y="120" rx="3" ry="3" width="201" height="6.4" /> 
    <circle cx="30" cy="30" r="30" />
  </content-loader>
</template>

<script>
  import { ContentLoader } from "vue-content-loader"

  export default {
    components: {
      ContentLoader
    }
  }
</script>

[Vue warn]: Unknown custom element: <svg> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <Home>
<Page>
<App> at components/App.vue

有没有 vue-content-loader 的替代品来获得类似的动画？或者有没有办法运行 NativeScript Vue 中的 vue-content-loader 包？

Answer 1

了解架构（NativeScript !== Cordova / PhoneGap）：

Cordova / PhoneGap 在 WebView 中托管您的网络应用程序，您所有的 UI 组件都是相同的 HTML DOM 元素。

NativeScript 允许您重用您的 Web 开发技能 (JavaScript / XML / CSS) 来构建本机移动应用程序。所有 UI 组件都与原生组件相同，就好像您正在使用 Objective C / Java 构建应用程序一样。

Java脚本运行时允许您执行任何独立于浏览器的代码 (CommonJS)。您将无法访问依赖于浏览器的对象，例如 HTML DOM / Canvas / SVG / Document / Window 等，因此您不能使用 vue-content-loader 在严重依赖 SVG 的 NativeScript 中。

您要查找的内容：

我相信您正在寻找骨架视图，不幸的是没有现成的插件可用。但是你可以写一个/简单地在你的项目中使用相关的本地库。

请参阅 plugin docs 了解更多信息。

还有一个 blog post 解释了如何使用 Angular 在 NativeScript 中执行此操作，您可以将其翻译成 Vue。

如何在 NativeScript Vue 中使用类似 SVG 的内容加载器？

How to use SVG like content loader in NativeScript Vue?

vue.js

nativescript

nativescript-vue