时间戳

首页 > 解决方案 > Vue Native App中如何实现nativescript-loading-indicator

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

问题描述

IM 试图实现 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();
        }
}

标签： javascriptvue.jsnativescript

解决方案

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 上的插件示例中提取

更新

推荐阅读