uniapp 自带顶部导航栏加载动画

uni-app 是一个基于 Vue.js 开发的跨平台应用框架，它可以使用 Vue.js 语法开发一次代码，生成多个平台的应用。在 uni-app 中，可以使用自带的导航栏组件 `uni-nav-bar` 来实现顶部导航栏的加载动画效果。该组件提供了 `loading` 属性来控制导航栏的加载状态，当 `loading` 为 `true` 时，导航栏会显示加载动画；当 `loading` 为 `false` 时，导航栏不会显示加载动画。

下面是一个示例代码：

<template>
  <view>
    <uni-nav-bar :title="'导航栏标题'" :loading="loading"></uni-nav-bar>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loading: true // 控制导航栏加载状态
    }
  },
  mounted() {
    // 模拟加载数据的过程
    setTimeout(() => {
      this.loading = false // 加载完成后将 loading 设置为 false
    }, 3000)
  }
}
</script>

在上述代码中，我们通过 `loading` 属性来控制导航栏的加载状态，并在 `mounted` 钩子函数中模拟了加载数据的过程，当数据加载完成后将 `loading` 设置为 `false`，从而隐藏加载动画。