UniApp UView 自定义 TabBar 底部导航栏

在 UniApp 开发中，我们经常使用底部导航栏来导航不同的页面。而 UView 是一套基于 Vue.js 的高质量 UI 组件库，提供了丰富、漂亮的组件来辅助我们开发。本文将介绍如何使用 UView 来自定义 TabBar 底部导航栏，并且将其内容进行一些丰富。

安装 UView

首先，我们需要在 UniApp 项目中安装 UView。在项目根目录下执行以下命令：

npm install uview-ui

完成后，我们需要在 main.js 中引入 UView：

import Vue from 'vue'
import App from './App'
import uView from 'uview-ui'

Vue.use(uView)

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
  ...App
})
app.$mount()

自定义 TabBar

接下来，我们可以开始自定义我们的 TabBar 了。在 App.vue 中，我们可以使用 UView 提供的 u-tabbar 组件来创建自定义的底部导航栏。

<template>
  <div class="app">
    <!-- 内容区域 -->
    <u-tabbar v-model="activeIndex">
      <!-- 首页 -->
      <u-tabbar-item index="0">
        <uni-icons name="home" size="24"></uni-icons>
        <view>首页</view>
      </u-tabbar-item>
      <!-- 发现 -->
      <u-tabbar-item index="1">
        <uni-icons name="compass" size="24"></uni-icons>
        <view>发现</view>
      </u-tabbar-item>
      <!-- 消息 -->
      <u-tabbar-item index="2">
        <uni-icons name="chat" size="24"></uni-icons>
        <view>消息</view>
      </u-tabbar-item>
      <!-- 我的 -->
      <u-tabbar-item index="3">
        <uni-icons name="person" size="24"></uni-icons>
        <view>我的</view>
      </u-tabbar-item>
    </u-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: 0, // 当前选中的 TabBar 索引
    }
  },
}
</script>

<style>
.app {
  width: 100%;
  height: 100%;
}
</style>

在以上代码中，我们使用了 u-tabbar 组件来创建底部导航栏，然后在每个 u-tabbar-item 中设置了对应的图标和文字。

你可以根据项目需求，自定义更多的 TabBar 项，例如增加通知、设置等功能模块。

美化标题

为了让标题更加美观，我们可以使用 Markdown 语法来渲染标题。在 App.vue 的 <template> 标签中，我们需要引入 Markdown 渲染库，如 mavon-editor。

首先，我们需要在 main.js 中安装 mavon-editor：

npm install mavon-editor

然后，更新 App.vue 文件：

<template>
  <div class="app">
    <u-tabbar v-model="activeIndex">
      <!-- 首页 -->
      <u-tabbar-item index="0">
        <uni-icons name="home" size="24"></uni-icons>
        <view>{{ $t("home") }}</view>
      </u-tabbar-item>
      <!-- 发现 -->
      <u-tabbar-item index="1">
        <uni-icons name="compass" size="24"></uni-icons>
        <view>{{ $t("discover") }}</view>
      </u-tabbar-item>
      <!-- 消息 -->
      <u-tabbar-item index="2">
        <uni-icons name="chat" size="24"></uni-icons>
        <view>{{ $t("message") }}</view>
      </u-tabbar-item>
      <!-- 我的 -->
      <u-tabbar-item index="3">
        <uni-icons name="person" size="24"></uni-icons>
        <view>{{ $t("my") }}</view>
      </u-tabbar-item>
    </u-tabbar>
    <markdown v-model="markdownContent"></markdown>
  </div>
</template>

<script>
import mavonEditor from 'mavon-editor'

export default {
  components: {
    markdown: mavonEditor,
  },
  data() {
    return {
      activeIndex: 0,
      markdownContent: `
# 自定义 TabBar 底部导航栏

## 功能丰富
TabBar 底部导航栏可以包含丰富的功能模块，例如“首页”、“发现”、“消息”、“我的”等功能，可根据项目需求进行自定义。

## 美化标题
使用 Markdown 语法渲染标题，使页面标题更加美观。

## 结语
使用 UView 和 Markdown 渲染库，我们可以轻松实现自定义的底部导航栏，并且拥有丰富的内容。
      `,
    }
  },
}
</script>

<style>
.app {
  width: 100%;
  height: 100%;
}
</style>

在以上代码中，我们增加了 markdown 组件，然后在 data() 方法中定义了 markdownContent 变量，用于存放我们要渲染的 Markdown 内容。

结语

通过使用 UView 和 Markdown 渲染库，我们可以轻松地实现自定义的底部导航栏，并且内容更加丰富和美观。

希望本文能给你带来帮助，祝你编写出优秀的 UniApp 应用！