Loading 加载

加载动画，用于表示加载中的过渡状态。

代码演示

基础用法

<!-- 在页面内添加对应的节点 -->
<hd-loading id="hd-loading"></hd-loading>

<hd-button @click="open">打开loading(2s后自动关闭)</hd-button>

// uni_modules
import { showLoading, hideLoading } from '@/uni_modules/fant-mini'
// npm
import { showLoading, hideLoading } from 'fant-mini'
export default {
  methods: {
    open() {
      // 开启loading
      showLoading()
      setTimeout(() => {
        // 关闭loading
        hideLoading()
      }, 2000)
    }
  }
}

提示的内容

通过title属性展示提示内容。

<hd-loading id="hd-loading"></hd-loading>
<hd-button @click="open">打开loading(2s后自动关闭)</hd-button>

// uni_modules
import { showLoading, hideLoading } from '@/uni_modules/fant-mini'
// npm
import { showLoading, hideLoading } from 'fant-mini'
export default {
  methods: {
    open() {
      // 开启loading
      showLoading({ title: '加载中...' })
      setTimeout(() => {
        // 关闭loading
        hideLoading()
      }, 2000)
    }
  }
}

动画类型

通过type属性决定开启的loading的动画类型，默认为flower。

<hd-loading id="hd-loading"></hd-loading>
<hd-button @click="open">打开loading(2s后自动关闭)</hd-button>

// uni_modules
import { showLoading, hideLoading } from '@/uni_modules/fant-mini'
// npm
import { showLoading, hideLoading } from 'fant-mini'
export default {
  methods: {
    open() {
      // 开启loading
      showLoading({ type: 'dot' })
      setTimeout(() => {
        // 关闭loading
        hideLoading()
      }, 2000)
    }
  }
}

底色

通过background属性控制loading是否显示黑色底色，默认true。

<hd-loading id="hd-loading"></hd-loading>
<hd-button @click="open">打开loading(2s后自动关闭)</hd-button>

// uni_modules
import { showLoading, hideLoading } from '@/uni_modules/fant-mini'
// npm
import { showLoading, hideLoading } from 'fant-mini'
export default {
  methods: {
    open() {
      // 开启loading
      showLoading({ background: false })
      setTimeout(() => {
        // 关闭loading
        hideLoading()
      }, 2000)
    }
  }
}

延迟展示

通过delayTime属性控制loading的延迟展示时间，默认0，单位毫秒。

<hd-loading id="hd-loading"></hd-loading>
<hd-button @click="open">打开loading(2s后自动关闭)</hd-button>

// uni_modules
import { showLoading, hideLoading } from '@/uni_modules/fant-mini'
// npm
import { showLoading, hideLoading } from 'fant-mini'
export default {
  methods: {
    open() {
      // 开启loading
      showLoading({ delayTime: 500 })
      setTimeout(() => {
        // 关闭loading
        hideLoading()
      }, 2000)
    }
  }
}

方法

方法名	说明	参数	返回值
showLoading	展示加载动画	LoadingOptions	Loading实例
hideLoading	关闭加载动画	-	-

LoadingOptions 数据结构

调用 showLoading 方法时，支持传入以下选项：

参数	说明	类型	是否必填	默认值
title	提示的内容。	String	false	-
type	动画类型，可选值:flower dot。	LoadingType	false	flower
background	是否黑色底色。	Boolean	false	true
delayTime	延迟展延时展示时间，默认 0，单位毫秒	Number	false	0
onClick	点击时的回调函数	Function	false	-
onOpened	完全展示后的回调函数	Function	false	-
onClose	关闭时的回调函数	Function	false	-

Props

Name	Description	Type	Required	Default
value	是否展示	Boolean	false	false
title	提示的内容	String	false	-
type	动画类型	'flower' / 'dot'	false	默认值:flower
background	是否显示黑色底色，默认：true	Boolean	false	默认值:true
delayTime	延时展示时间，默认0，单位毫秒	Number	false	0

Events

Event Name	Description	Parameters
input	消息展示状态变更时触发	value:Boolean 消息展示状态，建议通过v-model双向绑定输入值，而不是监听此事件的形式