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 根节点样式类