uniapp自定义顶部导航栏的模板。需要两个导航页面
时间: 2023-02-11 21:57:15 浏览: 139
在 uni-app 中,可以使用自定义组件来实现自定义顶部导航栏。
首先,创建一个自定义组件,命名为 `nav-bar`。在组件的 `template` 中,编写导航栏的 HTML 结构,可以使用 `uni-nav-bar` 组件来实现基本的导航栏功能。
然后在需要使用导航栏的页面中,在 `template` 中引用该自定义组件,并传入相关参数,如标题等。
示例代码如下:
```
<template>
<view class="page">
<nav-bar title="页面标题"></nav-bar>
<view class="content">
<!-- 页面内容 -->
</view>
</view>
</template>
<script>
import navBar from './components/nav-bar.vue';
export default {
components: {
navBar
},
data() {
return {
title: '页面标题'
}
}
}
</script>
```
在 nav-bar.vue 中
```
<template>
<view>
<uni-nav-bar :title="title"></uni-nav-bar>
</view>
</template>
<script>
export default {
props: {
title: {
type: String,
default: ''
}
}
}
</script>
```
如果需要两个导航页面可以在对应的页面引用该组件并传入对应的参数即可。