Spin 加载中

用于页面和区块的加载中状态。

使用指南

在 page.json 中引入组件

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

示例

  1. <view class="page">
  2.     <view class="page__hd">
  3.         <view class="page__title">Spin</view>
  4.         <view class="page__desc">加载中</view>
  5.     </view>
  6.     <view class="page__bd page__bd_spacing">
  7.         <view class="sub-title">Default</view>
  8.         <wux-spin wux-class="spin" />
  9.         <view class="sub-title">Size</view>
  10.         <wux-spin wux-class="spin" size="small" />
  11.         <wux-spin wux-class="spin" size="default" />
  12.         <wux-spin wux-class="spin" size="large" />
  13.         <view class="sub-title">Nested</view>
  14.         <wux-spin nested spinning="{{ spinning }}" tip="Loading...">
  15.             <view>微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp</view>
  16.             <view>微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp</view>
  17.             <view>微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp</view>
  18.         </wux-spin>
  19.         <wux-button block type="light" bind:click="onClick">Switch State</wux-button>
  20.     </view>
  21. </view>
  1. Page({
  2.     onClick(e) {
  3.         this.setData({
  4.             spinning: !this.data.spinning,
  5.         })
  6.     },
  7. })

视频演示

Spin

API

Spin props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-spin
classNames any 过渡的类名，更多内置过渡效果请参考 AnimationGroup wux-animate—fadeIn
tip string 自定义描述文案 -
size string 组件大小，可选值为 small、default、large default
spinning boolean 是否为加载中状态，仅当 nested 为 true 时生效 true
nested boolean 是否作为包裹元素 false

Spin slot

名称 描述
- 自定义内容

Spin externalClasses

名称 描述
wux-class 根节点样式类