@tanzhenxing/zx-loading v1.0.2

ZxLoading 加载组件

加载数据时显示动效，基于uni.showLoading API实现的简单封装。

基础使用

<template>
  <zx-loading :show="loading" text="加载中..." :mask="true"></zx-loading>
  <button @click="toggleLoading">切换加载状态</button>
</template>

<script setup>
import { ref } from 'vue'
import ZxLoading from '@/components/zx-loading/zx-loading.vue'

const loading = ref(false)

const toggleLoading = () => {
  loading.value = !loading.value
  
  // 3秒后自动关闭
  if (loading.value) {
    setTimeout(() => {
      loading.value = false
    }, 3000)
  }
}
</script>

直接使用uni API

也可以直接使用uni.showLoading和uni.hideLoading API：

// 显示加载
uni.showLoading({
  title: '加载中...',
  mask: true
})

// 隐藏加载
uni.hideLoading()

参数说明

事件

方法