Loading 加载指示器

使用指南

在 page.json 中引入组件

  1. "usingComponents": {
  2.   "w-loading": "wuss-weapp/w-loading/index",
  3. }

视频演示

代码演示

  1. <w-pane title="Loading" desc="加载指示器" />
  3. <w-pane desc="Callback" />
  4. <w-button type="info" bind:onClick="handleClick3" >正常使用</w-button>
  6. <w-pane desc="Default" />
  7. <w-button type="info" bind:onClick="handleClick1" >3秒后SetTimeOut关闭</w-button>
  9. <w-pane desc="TimeOut" />
  10. <w-button type="info" bind:onClick="handleClick2" >3秒后自动关闭</w-button>
  13. <w-loading id="wuss-loading" />
  14. <w-alert id="wuss-alert" />
  1. handleClick3() {
  2.   Loading.show({
  3.     hide: () => Alert({
  4.       title: '提示',
  5.       content: '我被关闭了',
  6.     }),
  7.   })
  8.   setTimeout(() => {
  9.     Loading.hide()
  10.   }, 3000);
  11. },
  12. handleClick1() {
  13.   Loading.show({
  14.     content: 'Loading...',
  15.     hide: () => Alert({
  16.       title: '提示',
  17.       content: '手动调用Hide方法关闭',
  18.     }),
  19.   })
  20.   setTimeout(() => {
  21.     Loading.hide()
  22.   }, 3000);
  23. },
  24. handleClick2() {
  25.   Loading.show({
  26.     content: 'Loading...',
  27.     timeout: 2000,
  28.     hide: () => Alert({
  29.       title: '提示',
  30.       content: '设置TimeOut自动关闭',
  31.     }),
  32.   })
  33. }

css

API

Attribute 属性

属性 说明 类型 默认值
content 展示内容 string 正在加载…
showText 是否展示内容文字 boolean true
timeout 指定时间段内关闭loading number -
hide loading消失后的回调 function -

Event 事件

事件名 说明 参数

Slot 插槽

名称 说明

Class 自定义类名

类名 说明
wuss-class 根节点样式类