小程序学习笔记-2：NavigationBar和TabBar的使用

本篇内容
* NavigationBar和TabBar的设置
* 多标签页面切换

为小程序添加导航栏和Tab栏，效果图如下：

效果图

NavigationBar

有三个地方可以对导航条进行设置

全局配置
在app.json中设置window

//app.json
"window": {
    "navigationBarBackgroundColor": "#ededed",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "豆瓣电影"
  },

为每个页面配置
在页面的json文件中配置

//search.json
"navigationBarBackgroundColor": "#ededed",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "搜索"

页面navigation-bar节点

页面导航条配置节点，用于指定导航栏的一些属性。
指路：小程序官方文档：navigation-bar

可以给每个页面配置不同的导航条，包括文字内容，背景和字体颜色，颜色切换时的动画效果等。比在json中配置的可选项更多一些。

首先添加模板文件，注意navigation-bar必须结合page-meta使用，并且必须是page-meta的第一个节点。而page-meta必须是页面第一个节点。

<!-- pages/board/board.wxml -->
<!-- page-meta必须是页面的第一个节点 -->
<page-meta>
  <!-- navigation-bar必须是page-meta的第一个节点 -->
  <navigation-bar
    title="{{nbTitle}}"
    loading="{{nbLoading}}"
    front-color="{{nbFrontColor}}"
    background-color="{{nbBackgroundColor}}"
    color-animation-duration="2000"
    color-animation-timing-func="easeIn"
  />
</page-meta>
<view>
  <text>board</text>
</view>

在js文件中设置数据绑定

//pages/board/board.js
Page({
  data: {
    nbFrontColor: '#000000',
    nbBackgroundColor: '#35495e',
  },
  onLoad() {
    this.setData({
      nbTitle: '豆瓣榜单',
      nbLoading: true,
      nbFrontColor: '#ffffff',
      nbBackgroundColor: '#35495e',
    })
  },
  onShow:function() {
    if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0
      })
    }
  }
})

TabBar

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

方法一

TabBar在app.json文件中进行配置。指路：微信小程序官方文档-全局配置-tabBar

//app.json
{
  "tabBar": {
    "color": "#c0c0c0",                 //文字颜色
    "selectedColor": "#fff",           //选中文字颜色
    "borderStyle": "black",           //tabBar边框颜色，只有black和white可选
    "backgroundColor": "#35495e",     //背景颜色
    "position": "bottom",              //top和botteom可选
    "list": [                                    //tab选项，数量支持2-5个
      {
        "text": "榜单",
        "pagePath": "pages/board/board",          //页面路径，必须在app.json的pages中先定义
        "iconPath": "images/board.png",            //图标路径
        "selectedIconPath": "images/board-actived.png"
      },
      {
        "text": "搜索",
        "pagePath": "pages/search/search",
        "iconPath": "images/search.png",
        "selectedIconPath": "images/search-actived.png"
      }
    ]
  }
}

方法二：自定义tabBar

如果需要对tabbar进行更多个性化的配置，可以采用自定义的方式。指路：微信小程序官方文档：custom-tabbar

首先在app.json
中的tabBar加入"custom": true（其他项目也配置好），声明 usingComponents 项

{
  "tabBar": {
    "custom": true,                //开启自定义
    "color": "#c0c0c0",
    "selectedColor": "#fff",
    "backgroundColor": "#35495e",
    "list": [{
      "pagePath": "page/board/board",
      "text": "榜单"
    }, {
      "pagePath": "page/search/search",
      "text": "搜索"
    }]
  },
  "usingComponents": {}           //在此全局声明自定义组件，或在每个页面的json文件中声明
}

在根目录下新建文件夹custom-tab-bar

项目目录

index.js

Component({        //Component 构造器可用于定义组件，调用 Component 构造器时可以指定组件的属性、数据、方法等
  data: {          //组件数据，此处对应tabBar中的配置数据
    selected: 0,   //选中tab的index，从0开始
    color: "#c0c0c0",            //字体颜色
    selectedColor: "#000",       //选中字体颜色
    list: [{                     //tab列表,没有数量限制，可以大于5个
      pagePath: "/pages/board/board",  //这里的路径和app.json中的tabBar里定义的不同，最前边必须要加斜杠‘/’，tabBar里不可以加‘/’
      iconPath: "/images/board.png",
      selectedIconPath: "/images/board-actived.png",
      text: "榜单"
    }, {
      pagePath: "/pages/search/search",
      iconPath: "/images/search.png",
      selectedIconPath: "/images/search-actived.png",
      text: "搜索"
    }]
  },
  attached() {
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset     //获取事件对象的数据
      const url = data.path                    //页面url
      wx.switchTab({url})                      //跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
      // this.setData({                        //微信小程序文档给的示例上有这几行，但我试了注释掉没有影响。
      //   selected: data.index                //但是每个页面的js文件中必须设置selected
      // })
    }
  }
})

index.wxml

此时需要开发者提供一个自定义组件来渲染 tabBar，所有 tabBar 的样式都由该自定义组件渲染。推荐用 fixed 在底部的 cover-view + cover-image 组件渲染样式，以保证 tabBar 层级相对较高。

cover-view:
覆盖在原生组件之上的文本视图。
可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher

<!--miniprogram/custom-tab-bar/index.wxml-->
<cover-view class="tab-bar">
  <cover-view class="tab-bar-border"></cover-view>
  <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
    <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
  </cover-view>
</cover-view>

index.json和index.wxss见官方示例 custom-tabbar

页面js文件
board.js

//pages/board/board.js
Component({
  pageLifetimes: {
    show() {
      if (typeof this.getTabBar === 'function' &&
        this.getTabBar()) {
        this.getTabBar().setData({
          selected: 0
        })
      }
    }
  }
})

自定义tabBar的官方示例片段中用的Component({})，小程序文档中说到：

事实上，小程序的页面也可以视为自定义组件。因而，页面也可以使用 Component 构造器构造，拥有与普通组件一样的定义段与实例方法。但此时要求对应 json 文件中包含 usingComponents 定义段。

L0中是用的Page({})注册的页面，这里可以对应的这样写：

//pages/board/board.js
Page({
      onShow:function() {
        if (typeof this.getTabBar === 'function' &&
          this.getTabBar()) {
          this.getTabBar().setData({
            selected: 0
          })
        }
      }
  })

search.js里把selected设置成1就可以了，其他代码一样。
补充：到后边发现，当把内容上拉到最底部的时候，自定义的tabBar会遮挡内容。需要注意处理一下。如果原有的tab栏可以满足功能，就不用自定义了。

自定义tabBar

直接在app.json中配置的不会遮挡

总结：

本篇学习记录了微信小程序中NavigationBar和TabBar的使用方法。

参考：

微信小程序官方文档：navigation-bar
微信小程序官方文档：tabBar

下一篇：小程序学习笔记-3：各页面结构和布局