在微信小程序的开发中，`tabBar` 是一个至关重要的组件，它定义了应用底部的固定导航栏，通常用于切换不同的主要页面。`mpvue` 是一个基于 Vue.js 的小程序框架，它允许开发者使用 Vue 的语法和思想来构建微信小程序。在`mpvue`中自定义`tabBar`，我们可以实现更丰富的交互效果和个性化的设计，提升用户体验。下面将详细讲解如何在`mpvue`中进行`tabBar`的自定义。
1. **配置 tabBar**
在微信小程序的配置文件 `app.json` 中，你需要定义`tabBar`的基本结构。`tabBar`的配置项包括 `list`，`color`，`selectedColor`，`borderStyle` 和 `backgroundColor` 等。例如：
```json
{
"tabBar": {
"custom": true,
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [
{"pagePath": "pages/index/index", "text": "首页", "iconPath": "image/icon_home.png", "selectedIconPath": "image/icon_home_selected.png"},
{"pagePath": "pages/logs/logs", "text": "日志", "iconPath": "image/icon_logs.png", "selectedIconPath": "image/icon_logs_selected.png"}
]
}
}
```
其中，`custom: true` 表示使用自定义的 tabBar，`list` 是每个 tab 的配置，包含页面路径、文字、图标等信息。
2. **创建 tabBar 组件**
在 `mpvue` 中，我们可以创建一个新的 Vue 文件作为 tabBar 的组件，例如 `components/CustomTabBar.vue`。这个组件需要包含`tabBar`的所有元素，如图标、文字等，并通过 Vue 的数据绑定和事件处理来实现动态效果。
3. **样式设计**
在 `CustomTabBar.vue` 中，可以使用 CSS 或者 Less 等预处理器来设计 tabBar 的样式，实现背景颜色、字体大小、边框样式等定制。可以利用 Vue 的 `v-if` 或 `v-bind:class` 来根据当前选中的 tab 应用不同的样式。
4. **事件监听与处理**
为了使 tabBar 可以切换页面，我们需要监听点击事件，并在事件处理函数中切换页面。在 `CustomTabBar.vue` 的 `methods` 部分定义这些函数，然后在对应的 tab 元素上绑定事件。
5. **注册与使用组件**
在 `main.js` 文件中，我们需要全局注册自定义的 tabBar 组件，这样可以在其他页面中直接使用。例如：
```javascript
import CustomTabBar from '@/components/CustomTabBar.vue'
Vue.component('custom-tab-bar', CustomTabBar)
```
接下来，在需要使用自定义 tabBar 的页面中，通过 `<custom-tab-bar>` 标签引入该组件。
6. **在 pages.json 中禁用默认 tabBar**
对于每个使用自定义 tabBar 的页面，你需要在对应的 `page.json` 文件中禁用默认的 tabBar，例如：
```json
{
"disableTabBar": true
}
```
7. **数据传递与状态管理**
如果需要在 tabBar 中显示动态数据（如未读消息数），可以通过 `vuex` 进行状态管理，或者使用 Vue 的 props 从父组件传递数据到 tabBar 组件。
8. **编译与预览**
使用 `mpvue-cli` 的命令进行编译和预览，确保自定义的 tabBar 正常工作。
通过以上步骤，我们就可以在`mpvue`中成功地自定义微信小程序的 tabBar，实现了与原生 tabBar 不同的样式和交互。在实际开发过程中，可以根据需求进行进一步的优化和调整，以达到最佳的用户体验。在提供的`mpvue-tabBar-master`文件中，应该包含了完整的`mpvue`自定义 tabBar 的示例代码，可以作为学习和参考的模板。
Fireinrain2020-04-15很好的资源，可以作为参考。
