vant NavBar 导航栏详解

vant 是一个基于 Vue 的移动端 UI 组件库，而 NavBar 是其中的一个导航栏组件。下面是对 vant 的 NavBar 导航栏组件的详细解释：

1. 引入 NavBar

首先，你需要在你的 Vue 组件中引入 NavBar 组件：

import { NavBar } from 'vant';  
  
export default {  
  components: {  
    [NavBar.name]: NavBar  
  },  
  // ...  
};

2. 基本用法

通过 title 属性来设置导航栏的标题：

<van-nav-bar title="标题" />

3. 属性

• title：导航栏的标题。
• left-text：导航栏左侧的文本内容，可以自定义为其他文本或者是一个返回按钮。
• right-text：导航栏右侧的文本内容。
• left-arrow：是否显示左侧的返回箭头，通常与 left-text 一起使用，表示返回功能。
• fixed：是否将导航栏固定在页面顶部。

4. 示例

返回上级功能

如果你想在导航栏实现返回上级功能，可以这样设置

<van-nav-bar title="标题" left-text="返回" left-arrow @click-left="onClickLeft" />  
  
<script>  
export default {  
  methods: {  
    onClickLeft() {  
      history.back(); // 使用浏览器的前进后退功能实现返回  
    }  
  }  
};  
</script>

右侧按钮

在导航栏右侧添加可点击的按钮：

<van-nav-bar title="标题" right-text="按钮" @click-right="onClickRight" />  
  
<script>  
export default {  
  methods: {  
    onClickRight() {  
      // 处理右侧按钮的点击事件  
    }  
  }  
};  
</script>

5. 样式定制

你可以通过 CSS 来定制 NavBar 的样式，包括颜色、字体、高度等。由于 vant 使用了 CSS 预处理器（如 Sass），你也可以通过修改其源码中的 Sass 变量来定制全局样式。

6. 注意事项

• 确保你已经正确安装了 vant 并引入了相应的样式文件。
• NavBar 组件通常用于页面的顶部，用于展示页面的标题和提供导航功能。
• 你可以根据需求自定义 left-text 和 right-text 的内容，甚至可以使用图标或其他组件。
• 使用 fixed 属性可以确保导航栏始终显示在页面的顶部，即使页面滚动也不会消失