@wines/loading v1.5.1

@wines/loading

Loading 指示器

用于展现 loading 提示框。

使用指南

在 page.json 中引入组件

{
  "navigationBarTitleText": "Loading",
  "usingComponents": {
    "wux-button": "@wines/button",
    "wux-loading": "@wines/loading"
  }
}

示例

该组件主要依靠 JavaScript 主动调用，所以一般只需在 wxml 中添加一个组件，并设置 id 为 #wux-loading 或其他，之后在 page.js 中调用 $wuxLoading(this, id) 获取匹配到的第一个组件实例对象。

<wux-loading id="wux-loading" />
<view class="page">
	<view class="page__hd">
		<view class="page__title">Loading</view>
		<view class="page__desc">指示器</view>
	</view>
	<view class="page__bd page__bd_spacing">
		<wux-button block type="light" bind:click="showLoading">加载中提示</wux-button>
	</view>
</view>

import './index.less';
import { $wuxLoading } from '@wines/loading';
import { PageData, PageCustom } from '@wines/core';

Page<PageData, PageCustom>({
  data: {
    name: '',
  },
  onLoad() {
    /** */
  },
  showLoading() {
    const wuxLoading = $wuxLoading();
    wuxLoading.show({
      text: '数据加载中',
    });
    setTimeout(() => {
      wuxLoading.hide();
    }, 1500);
  },
});

API

Loading.method

• Loading.show
• Loading.hide