微信小程序重写tabbar底部导航，供大家参考，具体内容如下
1.app.js代码如下：
editTabBar: function() {
var e = this.globalData.tabbar, a = getCurrentPages(), t = a[a.length - 1], s = t.__route__;
0 != s.indexOf("/") && (s = "/" + s);
for (var n in e.list) e.list[n].selected = !1, e.list[n].pagePath == s && (e.list[n].
在微信小程序中，底部导航（tabbar）是用户界面中的重要组成部分，用于提供主要功能间的快速切换。在本文中，我们将深入探讨如何重写微信小程序的tabbar，并提供相关代码示例。
微信小程序的tabbar配置通常在全局配置文件`app.json`或单独的配置文件中定义。在描述中提到的代码片段中，我们看到`app.js`文件中有一个`editTabBar`函数，这是用来动态更新tabbar选中状态的关键方法。该函数会根据当前页面路由`__route__`来判断哪个tab应该被选中。这段代码的主要逻辑如下：
```javascript
editTabBar: function() {
var e = this.globalData.tabbar,
a = getCurrentPages(),
t = a[a.length - 1],
s = t.__route__;
0 != s.indexOf("/") && (s = "/" + s);
for (var n in e.list)
e.list[n].selected = !1,
e.list[n].pagePath == s && (e.list[n].selected = !0);
t.setData({tabbar: e});
}
```
这里的`getCurrentPages()`函数获取当前页面栈，`a[a.length - 1]`则表示获取栈顶（即当前）页面对象，`__route__`属性表示当前页面的路由。`for`循环遍历全局tabbar配置`list`，设置每个tab的选中状态。通过`setData`将更新后的tabbar数据传递给页面。
在`app.json`或单独配置文件中，tabbar的初始配置可能如下所示：
```json
{
"tabBar": {
"color": "#123",
"selectedColor": "#1ba9ba",
"borderStyle": "#1ba9ba",
"backgroundColor": "#fff",
"list": [
{
"pagePath": "/we7/pages/index/index",
"iconPath": "/we7/resource/icon/home.png",
"selectedIconPath": "/we7/resource/icon/homeselect.png",
"text": "首页"
},
{
"pagePath": "/we7/pages/user/index/index",
"iconPath": "/we7/resource/icon/user.png",
"selectedIconPath": "/we7/resource/icon/userselect.png",
"text": "我的"
}
]
}
}
```
这个配置中，`color`、`selectedColor`、`borderStyle`分别定义了未选中、选中状态下的文字颜色和边框颜色，`backgroundColor`定义了tabbar背景色，而`list`数组包含了各个tab的详细信息，包括页面路径、图标路径等。
接下来，我们需要在页面的`wxml`和`wxss`文件中定义tabbar的布局和样式。在提供的代码中，`template.wxml`创建了一个模板`tabbar`，使用了`wx:for`循环遍历`tabbar.list`来渲染每个tab，每个tab包含一个图标和文字，根据`selected`状态决定显示哪种图标。`template.wxss`则定义了tabbar的盒模型、布局方向、对齐方式以及边框样式等。
```html
<!-- template.wxml -->
<template name="tabbar">
<view class="tabbar_box"
style="background-color:{{tabbar.backgroundColor}};
border-top-color:{{tabbar.borderStyle}};
{{tabbar.position=='top'?'top:0':'bottom:0'}}">
<navigator class="tabbar_nav"
openType="redirect"
style="width:{{1/tabbar.list.length*100}}%;
color:{{item.selected?tabbar.selectedColor:tabbar.color}}"
url="{{item.pagePath}}"
wx:for="{{tabbar.list}}"
wx:key="index">
<image class="tabbar_icon" src="{{item.selected?item.selectedIconPath:item.iconPath}}"></image>
<text>{{item.text}}</text>
</navigator>
</view>
</template>
/* template.wxss */
.tabbar_box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-pack: distribute;
justify-content: space-around;
position: relative;
/* 其他样式... */
}
```
通过这种方式，我们可以自定义微信小程序的底部导航栏，使其与应用的整体风格保持一致，并且能够根据业务需求动态调整选中状态。请注意，为了在不同页面间共享同一份tabbar配置，建议将其封装为公共组件，然后在各页面中引用。同时，如果需要在页面内修改tabbar，记得调用`editTabBar`函数更新全局数据。
微信小程序的tabbar重写涉及到全局配置、动态数据处理以及自定义样式，通过以上步骤，开发者可以实现功能强大且美观的底部导航。
