[保姆级教程]uniapp自界说导航栏

---

导文

   在 UniApp 中，自界说导航栏通常涉及到潜伏默认的导航栏，并在页面顶部添加自界说的视图组件来模拟导航栏的功能。
  潜伏默认导航栏：

全局潜伏

在你的页面 pages.json 设置中，为相应的页面设置 navigationStyle 为 custom，这将潜伏默认的导航栏。

1.           "globalStyle": {
2.                 "navigationStyle": "custom"
3.         },

复制代码

当前页面潜伏

1.    {
2.      "pages": [
3.        {
4.          "path": "pages/index/index",
5.          "style": {
6.            "navigationStyle": "custom"
7.          }
8.        },
9.        // ... 其他页面配置
10.      ]
11.    }

复制代码

添加自界说导航栏视图：

手写导航栏

在你的页面 .vue 文件中，利用 <view> 或 <template> 标签在页面顶部添加自界说的导航栏视图。这可以包罗标题文本、返回按钮、搜索框等。

1.    <template>
2.      <view class="container">
3.        <view class="custom-nav-bar">
4.          <text class="back-button" @click="goBack">返回</text>
5.          <text class="title">标题</text>
6.          <!-- 这里可以添加其他导航栏元素 -->
7.        </view>
8.        <!-- 页面内容 -->
9.        <view class="content">
10.          <!-- ... -->
11.        </view>
12.      </view>
13.    </template>
15.    <script>
16.    export default {
17.      methods: {
18.        goBack() {
19.          uni.navigateBack();
20.        },
21.        // ... 其他方法
22.      }
23.    };
24.    </script>
26.    <style>
27.    .custom-nav-bar {
28.      display: flex;
29.      justify-content: space-between;
30.      align-items: center;
31.      height: 44px; /* 根据需要调整高度 */
32.      background-color: #fff; /* 导航栏背景色 */
33.      /* 其他样式属性 */
34.    }
35.    .back-button {
36.      /* 返回按钮样式 */
37.    }
38.    .title {
39.      /* 标题样式 */
40.    }
41.    /* 其他样式 */
42.    </style>

复制代码

组件导航栏

利用uinapp原生的组件

1. <template>
2.         <view class="checkIn">
3.                
4.                 <view class="checkIn-date">
5.                         <uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" left-text="返回"
6.                         title="自定义导航栏" @clickLeft="back" />
7.                 </view>
8.                 <view class="checkIn-main">
9.                         <uni-card title="标题文字" thumbnail="" extra="额外信息" note="Tips">
10.                                 内容主体，可自定义内容及样式
11.                         </uni-card>
12.                 </view>
13.         </view>
14. </template>
16. <script>
17.        
18. export default {
19.         components: {
20.        
21.         },
22.         data() {
23.                 return {
25.                 }
26.         },
27.         onReady() {
29.         },
30.         methods: {
32.         }
33. }
34. </script>
36. <style>
38. </style>

复制代码

官网详细设置》》
   您好，我是肥晨。
欢迎关注我获取前端学习资源，一样平常分享技能厘革，生存法则；行业内幕，洞察先机。