Loading 指示器

用于展现 loading 提示框。

使用指南

在 page.json 中引入组件

  1. {
  2.     "navigationBarTitleText": "Loading",
  3.     "usingComponents": {
  4.         "wux-button": "../../dist/button/index",
  5.         "wux-loading": "../../dist/loading/index"
  6.     }
  7. }

示例

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

  1. <wux-loading id="wux-loading" />
  3. <view class="page">
  4.     <view class="page__hd">
  5.         <view class="page__title">Loading</view>
  6.         <view class="page__desc">指示器</view>
  7.     </view>
  8.     <view class="page__bd page__bd_spacing">
  9.         <wux-button block type="light" bind:click="showLoading">加载中提示</wux-button>
  10.     </view>
  11. </view>
  1. import { $wuxLoading } from '../../dist/index'
  3. Page({
  4.     data: {},
  5.     onLoad() {},
  6.     showLoading() {
  7.         this.$wuxLoading = $wuxLoading()
  8.         this.$wuxLoading.show({
  9.             text: '数据加载中',
  10.         })
  12.         setTimeout(() => {
  13.             this.$wuxLoading.hide()
  14.         }, 1500)
  15.     },
  16. })

视频演示

Loading

API

参数 类型 描述 默认值
options object 配置项 -
options.prefixCls string 自定义类名前缀 wux-loading
options.classNames any 过渡的类名，更多内置过渡效果请参考 AnimationGroup wux-animate—fadeIn
options.text string 提示文本 数据加载中
options.mask boolean 是否显示蒙层 true

Loading.method

  • Loading.show
  • Loading.hide