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

视频演示

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