UniApp必备技能之通用可拓展自定义加载动画组件实战

<template>  <view    v-if="visible"    class="loading-container"    :class="{ 'global-mask': maskType === 'global' }"    :style="customStyle"    @touchmove.prevent  >    <viewclass="loading-content">      <!-- 根据type显示不同动画 -->      <viewv-if="type === 'spinner'"class="spinner"></view>      <viewv-else-if="type === 'circle'"class="circle"></view>      <viewv-else-if="type === 'dots'"class="dots">        <viewclass="dot"></view>        <viewclass="dot"></view>        <viewclass="dot"></view>      </view>      <textv-if="text"class="loading-text">{{ text }}</text>    </view>  </view></template><scriptsetup>defineProps({  visible: {    type: Boolean,    default: false  },  type: {    type: String,    default: 'spinner' // spinner, circle, dots  },  maskType: {    type: String,    default: 'global' // global, none  },  text: {    type: String,    default: ''  },  customStyle: {    type: Object,    default: () => ({})  }})</script><stylescoped>.loading-container {  display: flex;  align-items: center;  justify-content: center;  position: relative;  z-index: 9999;}.global-mask {  position: fixed;  top: 0;  left: 0;  width: 100%;  height: 100%;  background-color: rgba(0, 0, 0, 0.3);}.loading-content {  display: flex;  flex-direction: column;  align-items: center;  justify-content: center;  background-color: rgba(0, 0, 0, 0.7);  border-radius: 16rpx;  padding: 30rpx;  min-width: 200rpx;}.loading-text {  color: #fff;  font-size: 28rpx;  margin-top: 20rpx;}/* 旋转菊花 */.spinner {  width: 60rpx;  height: 60rpx;  border: 6rpx solid #f3f3f3;  border-top: 6rpx solid #3498db;  border-radius: 50%;  animation: spin 1s linear infinite;}@keyframes spin {  0% { transform: rotate(0deg); }  100% { transform: rotate(360deg); }}/* 圆环进度 */.circle {  width: 60rpx;  height: 60rpx;  border: 6rpx solid #f3f3f3;  border-top: 6rpx solid #3498db;  border-radius: 50%;  animation: circle 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;}@keyframes circle {  0% { transform: rotate(0deg); }  100% { transform: rotate(360deg); }}/* 点阵跳动 */.dots {  display: flex;  align-items: center;  justify-content: center;}.dot {  width: 16rpx;  height: 16rpx;  margin: 0 6rpx;  background-color: #fff;  border-radius: 50%;  animation: dot-pulse 1.5s infinite;}.dot:nth-child(2) { animation-delay: 0.2s; }.dot:nth-child(3) { animation-delay: 0.4s; }@keyframes dot-pulse {  0%, 100% { transform: scale(0.5); opacity: 0.5; }  50% { transform: scale(1); opacity: 1; }}</style>

// stores/loading.jsimport { defineStore } from 'pinia'export const useLoadingStore = defineStore('loading', {  state: () => ({    visible: false,        // 是否显示    type: 'spinner',       // 动画类型    maskType: 'global',    // 遮罩类型    text: '',              // 提示文字    requestCount: 0,       // 当前进行中的请求数    manualShow: false      // 是否手动打开（手动打开时，请求结束不会自动关闭）  }),  actions: {    // 显示loading（手动调用）    show(options = {}) {      this.visible = true      this.type = options.type || this.type      this.maskType = options.maskType || this.maskType      this.text = options.text || this.text      this.manualShow = true    },    // 隐藏loading（手动调用）    hide() {      this.visible = false      this.manualShow = false      this.requestCount = 0 // 重置计数器    },    // 请求开始（由request拦截器调用）    showForRequest() {      this.requestCount++      if (!this.manualShow) {        this.visible = true      }    },    // 请求结束（由request拦截器调用）    hideForRequest() {      if (this.requestCount > 0) {        this.requestCount--      }      if (this.requestCount === 0 && !this.manualShow) {        this.visible = false      }    },    // 重置（用于退出登录等场景）    reset() {      this.visible = false      this.requestCount = 0      this.manualShow = false    }  }})

<!-- App.vue --><template>  <view>    <!-- 其他内容 -->    <Loading      :visible="loadingStore.visible"      :type="loadingStore.type"      :maskType="loadingStore.maskType"      :text="loadingStore.text"    />  </view></template><scriptsetup>import { useLoadingStore } from '@/stores/loading'import Loading from '@/components/Loading.vue'const loadingStore = useLoadingStore()</script>

// utils/request.jsimport { useLoadingStore } from '@/stores/loading'// 请求配置const baseURL = 'https://api.example.com'// 封装请求函数function request(options) {  return new Promise((resolve, reject) => {    // 是否显示loading（默认根据options决定，也可全局配置）    const showLoading = options.showLoading !== false    // 请求开始：如果需要显示loading，调用store方法    if (showLoading) {      const loadingStore = useLoadingStore()      loadingStore.showForRequest()    }    // 发起请求    uni.request({      url: baseURL + options.url,      method: options.method || 'GET',      data: options.data,      header: options.header || {},      success: (res) => {        // 业务成功判断（根据实际接口调整）        if (res.statusCode === 200) {          resolve(res.data)        } else {          reject(res)        }      },      fail: (err) => {        reject(err)      },      complete: () => {        // 请求结束：关闭loading        if (showLoading) {          const loadingStore = useLoadingStore()          loadingStore.hideForRequest()        }      }    })  })}export default request

<template>  <view>    <button @click="showManualLoading">手动打开loading</button>    <button @click="hideManualLoading">手动关闭loading</button>  </view></template><scriptsetup>import { useLoadingStore } from '@/stores/loading'const loadingStore = useLoadingStore()const showManualLoading = () => {  loadingStore.show({ type: 'dots', text: '加载中...' })}const hideManualLoading = () => {  loadingStore.hide()}</script>

<template>  <view>    <button @click="fetchData">发起请求（自动显示loading）</button>  </view></template><scriptsetup>import request from '@/utils/request'const fetchData = async () => {  try {    const res = await request({      url: '/user/info',      method: 'GET',      showLoading: true // 默认true，可省略    })    console.log(res)  } catch (err) {    console.error(err)  }}</script>

// 同时发起两个请求Promise.all([  request({ url: '/api1' }),  request({ url: '/api2' })]).then(() => {  console.log('所有请求完成')})// 结果：loading只在第一个请求开始显示，最后一个请求完成后关闭

// 在页面中onUnload(() => {  const loadingStore = useLoadingStore()  loadingStore.reset()})