uniapp封装顶部导航栏

＊＊＊于Vue.js的跨平台开发框架，可以用于开发iOS、Android和Web应用。要封装顶部导航栏，可以通过以下步骤进行：

1. 在uniapp的项目目录中找到`/common`或者`/components`文件夹，没有的话可以自己创建一个。
2. 在该文件夹下创建一个新的Vue组件，比如命名为`TopNavBar.vue`。
3. 在`TopNavBar.vue`组件中，编写顶部导航栏的布局和样式。
4. 使用props接收需要的参数，比如导航栏的标题、是否显示返回按钮等。
5. 在`TopNavBar.vue`组件中，处理返回按钮点击事件，并通过emit向父组件传递事件。
6. 在需要使用顶部导航栏的页面中，引入`TopNavBar.vue`组件，并传入相应的参数。

以下是一个简单的示例代码：

<template>
  <div class="top-nav-bar">
    <div class="back-btn" @click="handleBack">
      返回
    </div>
    <div class="title">{{ title }}</div>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    showBackBtn: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleBack() {
      this.$emit('back');
    }
  }
}
</script>

<style scoped>
.top-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background-color: #333;
  color: #fff;
}

.back-btn {
  cursor: pointer;
}

.title {
  font-size: 18px;
  font-weight: bold;
}
</style>

使用时，在需要的页面中引入组件，并传递相应的参数：

<template>
  <view>
    <top-nav-bar title="顶部导航栏" show-back-btn @back="handleBack"></top-nav-bar>
    <!-- 页面内容 -->
  </view>
</template>

<script>
import TopNavBar from '@/components/TopNavBar.vue'

export default {
  components: {
    TopNavBar
  },
  methods: {
    handleBack() {
      // 处理返回按钮点击事件
    }
  }
}
</script>

<style>
/* 样式 */
</style>

通过以上步骤，你就可以在uniapp中封装顶部导航栏组件，并在需要使用的页面中引入和使用了。