Question

我正在尝试实现nstudio / nativescript-loading-indicator，但在我的Vue本机应用程序中无法正常工作

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")

从the plugin's example on npm拉出

已更新

如何在Vue Native App中完成nativescript-loading-indicator

1 个答案: