Vue Native App中如何实现nativescript-loading-indicator答案

【问题标题】：How to impletement nativescript-loading-indicator in Vue Native AppVue Native App中如何实现nativescript-loading-indicator
【发布时间】：2019-10-15 08:58:16
【问题描述】：

我正在尝试实现 nstudio/nativescript-loading-indicator 但在我的 Vue Native App 中无法正常工作

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();
        }
}

【问题讨论】：

请添加适当的代码和/或可能的 Playground 问题示例。
再次检查我已经编辑了我的问题
您没有将LoadingIndicator 添加到您的页面/视图中。在模板中包含指标并绑定忙属性。
如何在模板中包含指示符并绑定忙属性？我是 nativeScript Vue 的新手
与{N}无关，只是标准的vue模板。只需参考docs for example

标签： javascript vue.js nativescript

【解决方案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

更新

【讨论】：

Got Error Msg UIView is not defined