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将您的Web应用托管在WebView中，所有UI组件都是相同的HTML DOM元素。

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

JavaScript运行时允许您执行与浏览器无关的任何代码（CommonJS）。您将无法访问依赖于浏览器的对象，例如HTML DOM / Canvas / SVG / Document / Window等。因此，您不能在很大程度上依赖SVG的NativeScript中使用 vue-content-loader 。

您要查找的内容：

我相信您正在寻找“骨架”视图，很遗憾，没有现成的插件可用。但是您可以编写一个项目，也可以只在项目中使用相关的本机库。

有关更多信息，请参考plugin docs。

还有一个blog post解释了如何在带有Angular的NativeScript中进行此操作，您可以将其转换为Vue。

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

1 个答案: