Как реализовать индикатор загрузки nativescript в приложении Vue Native

Question

IM пытается реализовать nstudio / nativescript-индикатор загрузки, но не работает должным образом в моем приложении Vue Native

import {LoadingIndicator,Mode,OptionsCommon} from '@nstudio/nativescript-loading-indicator';
const indicator = new LoadingIndicator();


 export default {
        data() {
            return {

            }
        },
        mounted() {
            indicator.show();
            this.homeFirstbanner();
            this.justArrivals();
            this.getCategory();
        }
}

Answer 1

const LoadingIndicator = require('@nstudio/nativescript-loading-indicator').LoadingIndicator;
const Mode = require('@nstudio/nativescript-loading-indicator').Mode;

const loader = new LoadingIndicator();
import { Page } from 'tns-core-modules/ui/page';

// optional options
// android and ios have some platform specific options
const options = {
  message: 'Loading...',
  details: 'Additional detail note!',
  progress: 0.65,
  margin: 10,
  dimBackground: true,
  color: '#4B9ED6', // color of indicator and labels
  // background box around indicator
  // hideBezel will override this if true
  backgroundColor: 'yellow',
  userInteractionEnabled: false, // default true. Set false so that the touches will fall through it.
  hideBezel: true, // default false, can hide the surrounding bezel
  mode: Mode.AnnularDeterminate, // see options below
  android: {
    view: page.getViewById('stackView'), // Target view to show on top of (Defaults to entire window)
    cancelable: true,
    cancelListener: function(dialog) {
      console.log('Loading cancelled');
    }
  },
  ios: {
    view: page.getViewById('stackView') // Target view to show on top of (Defaults to entire window)
  }
};

loader.show(options); // options is optional

// Do whatever it is you want to do while the loader is showing, then

loader.hide();

Представление должно быть допустимым uiView в вашем интерфейсе. Просто дайте StackLayout Id и выберите его. Пример: view: page.getViewById("stackLayout")

Извлечено из Пример плагина на npm

ОБНОВЛЕНО