好！我将一步步地带你完成微信小程序顶部的平分导航栏。
前言
在微信小程序中，顶部导航栏是非常常见的UI组件。尤其是在新闻类的小程序里，水平滑动导航栏、居中导航栏和平分导航栏都是非常流行的设计风格。在本文中，我们将重点讲解如何完成平分导航栏。
准备工作
在开始之前，请确保你已经掌握了微信小程序的基本知识，包括页面结构、组件使用等。我们将基于《报修小程序源码》这个基础项目来拓展讲解平分导航栏。
步骤一：创建导航栏组件
首先，我们需要创建一个导航栏组件。新建一个文件夹，命名为`nav-bar`，然后在其中创建一个`index.wxml`和一个`index.wxss`文件。
`index.wxml`：
```wxml
```
`index.wxss`：
```css.nav-bar {
position: fixed;
top:0;
left:0;
width:100%;
height:50px;
background-color: fff;
box-shadow:02px4px rgba(0,0,0,0.1);
}
.nav-item {
float: left;
margin-right:20px;
padding-top:10px;
}
```
步骤二：定义导航栏数据
在`app.wxml`中，我们需要定义一个导航栏的数据结构。新建一个`data`对象，并将其赋值给`navList`属性。
```wxml
```
在`app.js`中，我们需要定义一个`navList`数组，包含导航栏的数据项。
```javascriptPage({
data: {
navList: ['首页', '新闻', '视频', '更多']
}
})
```
步骤三：绑定事件
在`app.wxml`中，我们需要绑定一个点击事件到每个导航栏的项上。新建一个`bindTap`函数，并将其赋值给`tap`属性。
```wxml
```
在`app.js`中，我们需要定义一个`bindTap`函数，处理点击事件。
```javascriptbindTap(e) {
console.log('点击了', e.currentTarget.dataset.item)
}
```
步骤四：完成平分导航栏
最后，我们需要将导航栏的样式调整为平分导航栏。修改`index.wxss`文件，添加以下代码：
```css.nav-item {
float: left;
margin-right:20px;
padding-top:10px;
}
.nav-item:last-child {
margin-right:0;
}
```
这样，我们就完成了一个平分导航栏的实现。
总结
在本文中，我们一步步地讲解了如何完成微信小程序顶部的平分导航栏。通过创建导航栏组件、定义导航栏数据、绑定事件和调整样式，我们成功地实现了一个平分导航栏。
