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

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

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

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

最终实现结果如下：

编写 wxml 页面

编程思路：

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

代码编写：

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

  <view class="flex nav">
  	<view class="nav-item  {
    
    {index==current?'text-selected current':''}}" wx:for="{
    
    {tabs}}"