Как использовать SVG-подобный загрузчик контента в NativeScript Vue? - PullRequest
Новая
       4

Как использовать SVG-подобный загрузчик контента в NativeScript Vue?

0 голосов
/ 14 июня 2019

Я использовал 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 для получения аналогичной анимации?Или есть способ запустить пакет vue-content-loader внутри NativeScript Vue?

1 Ответ

0 голосов
/ 14 июня 2019

Понимание архитектуры (NativeScript! == Cordova / PhoneGap):

Cordova / PhoneGap размещает ваше веб-приложение внутри WebView, все ваши компоненты пользовательского интерфейса - это одни и те же элементы HTML DOM.

NativeScript позволяет повторно использовать ваши навыки веб-разработки (JavaScript / XML / CSS) для создания собственного мобильного приложения.Все компоненты пользовательского интерфейса такие же, как нативные, как будто вы создаете приложение с Objective C / Java.

Среда выполнения JavaScript позволяет выполнять любой код, независимый от браузера (CommonJS).У вас не будет доступа к объектам, зависящим от браузера, таким как HTML DOM / Canvas / SVG / Document / Window и т. Д. Поэтому вы не можете использовать vue-content-loader в NativeScript, который сильно зависит от SVG.

То, что вы ищете:

Я полагаю, что вы ищете Skeleton view, к сожалению, нет готовых плагинов.Но вы можете написать одну / просто использовать соответствующую нативную библиотеку в своем проекте.

Для получения дополнительной информации см. плагин docs .

В блоге объясняется, как это можно сделать в NativeScript с Angular., вы можете перевести его на Vue.

...