解构Uniapp：移除微信小程序顶部导航栏，保留标题与返回键

前端

2024-01-02 22:04:32

告别小程序顶部导航栏：在 Uniapp 中保留标题和返回键

小程序开发中，去除顶部导航栏是一个常见需求。但是，这样做通常会导致标题和返回键的消失，让用户无所适从。在本文中，我们将介绍如何在 Uniapp 中移除导航栏，同时保留这些关键元素。

背景介绍

小程序的顶部导航栏通常包含标题、返回按钮和其他功能。然而，在某些情况下，开发人员可能希望隐藏导航栏，以提供更沉浸式的体验或节省屏幕空间。

准备工作

在开始之前，我们需要准备以下组件和模块：

uni-app-nav-bar 组件：提供导航栏功能，包括标题、返回按钮等。
uni-store 模块：用于存储状态栏高度。

步骤详解

1. 创建 Store 文件

创建 store 文件夹，并在其中创建一个名为 index.js 的文件。在此文件中，编写以下代码：

import Vuex from 'vuex'
const store = new Vuex.Store({
  state: {
    statusBarHeight: 0 // 状态栏高度
  },
  mutations: {
    setStatusBarHeight (state, height) {
      state.statusBarHeight = height
    }
  }
})

export default store

2. 引入组件和 Store

在需要显示导航栏的页面中，引入以下组件和模块：

<script>
import { uniNavBar, mapState } from '@dcloudio/uni-app'
import store from '@/store/index'
export default {
  // ...
}
</script>

3. 使用组件

在页面中使用 uni-app-nav-bar 组件，并设置必要属性：

<template>
  <uni-app-nav-bar
    :title="title"
    :left-icon="leftIcon"
    :left-text="leftText"
    @click-left="goBack"
  />
</template>

4. 绑定 Store 变量

使用 mapState 将 Store 中的状态栏高度变量绑定到组件中：

computed: {
  ...mapState([
    'statusBarHeight'
  ])
}

5. 应用样式

在组件样式中，应用状态栏高度变量，以调整导航栏的位置：

.uni-nav-bar {
  top: {{ statusBarHeight }}px;
  height: 44px;
}

代码示例

完整代码示例如下：

<template>
  <uni-app-nav-bar
    :title="title"
    :left-icon="leftIcon"
    :left-text="leftText"
    @click-left="goBack"
  />
</template>

<script>
import { uniNavBar, mapState } from '@dcloudio/uni-app'
import store from '@/store/index'
export default {
  data() {
    return {
      title: '我的页面',
      leftIcon: 'back',
      leftText: '返回'
    }
  },
  computed: {
    ...mapState([
      'statusBarHeight'
    ])
  },
  methods: {
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>