手把手教你完成微信小程序顶部导航栏

微信小程序顶部导航栏十分常见、尤其是在新闻类的小程序里，常见的导航栏有可水平滑动导航栏、居中导航栏、平分导航栏，本文手把手教你完成水平导航栏。

以《报修小程序源码》为基础拓展讲解平分导航栏

传送门：flask + mysql + 微信报修小程序源码获取

最终实现结果如下：

编写 wxml 页面

编程思路：

需要一个外层 view ，将内层水平的子 view 包含进来 ，保证内层 view 的灵活行，是用遍历 tabs 数组的形式进行 。

代码编写：

在 wxml 页面最顶部写入下面代码：

  <view class="flex nav">
  	<view class="nav-item  {{index==current?'text-selected current':''}}" wx:for="{{tabs}}" wx:key bindtap="tabSelect" data-id="{{index}}">
  		{{item}}
  	</view>
  </view>

编写 wxss 样式

编程思路：

水平平分导航栏包含：一个外层 view 和多个内层 view ，内层 view 是水平排列，外层 view 需使用 css 的 flex 属性 ，同时内层各个 view 平分 ，因此内层 view 需要设置 flex=1 。

对于 css 不熟悉的同学，建议去看一下 css flex的使用方法。

在 wxss 文件中写入以下代码：

/* 页面背景颜色为 #f2f2f2 */
page {
  background: #f2f2f2;
}

/* 设置导航外层样式，绝对定位设置为fixed。z-index: 999999; 能够将 nav 布局层级结果放在最上层，避免被下层view遮挡*/
.nav {
  position: fixed;
  background: white;
  color: #353535;
  z-index: 999999;
  max-height: 94rpx;
  width: 100%;
}

/* 设置为水平布局，文字居中显示 */
.flex {
  display: flex;
  text-align: center;
}

/* 设置选中项的底部边框 */
.nav .nav-item.current {
  border-bottom: 4rpx solid;
}

/* 设置选中项的文字颜色和大小 */
.text-selected {
  color: #2196F3;
  font-size: 34rpx;
}

/* 设置各项的高度、边距，同时设置flex=1，表示各项平分 */
.nav .nav-item {
  height: 90rpx;
  display: inline-block;
  line-height: 90rpx;
  margin: 0 10rpx;
  padding: 0 20rpx;
  flex: 1;
}

编写 js

编程思路：

在 data 中定义一个数组 tabs ，用于存放我们要展示的导航项，这里只放置了三项，建议不超过五项，超过五项不建议使用平分导航栏，需要使用可滑动导航栏。若页面进入我们希望显示第一个 tab ，则设置 current = 0 ，若希望像是第二个 tab ，则设置 current = 1。

每个 tab 点击后，使用 tabSelect 函数进行切换改变 current 的数值即可。

在 js 文件中写入下面代码：

 data: {
    url: app.domain,
    tabs: ['新报修', '维修中', '已完成'],
    current:0,
  },
  tabSelect:function(e){
    var current = e.currentTarget.dataset.id
    this.setData({
      current:current
    })
  },

到此！我们就完成一个水平平分导航栏。

总结：

小程序页面的编写，实际上和html+css+js的编写相似，样式的编写主要是css 实现。假设你想完成一个特殊的页面样式，你可以在度娘上搜索使用 html+css实现的类似页面样式，修改 html 标签为小程序标签即可使用。

现在，你应该把《报修小程序》源码做进一步修改，将报修记录和添加报修拆分，首页显示报修记录，报修页直接换成报修添加页面。继续扩展出报修工单的状态吧！

如果你遇见任何问题，可扫码关注我，与我交流！