微信小程序~底部 Tab + 顶上 TitleBar 的实现

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ITxiaodong/article/details/80303714

这一节内容比较简单，实现的效果图如下

底部导航栏的实现

官方文档—框架—配置

查阅文档后，我们的实现方式如下：

"tabBar":{
    "borderStyle":"white",
    "position":"bottom",
    "list":[
      {
        "pagePath":"pages/reading/reading",
        "text":"干货",
        "iconPaht":"images/tab/yuedu.pg",
        "selectedIconPath":"images/tab/yuedu_hl.png"
      },
      {
        "pagePath": "pages/welfare/welfare",
        "text": "福利",
        "iconPath": "images/tab/dianying.png",
        "selectedIconPath": "images/tab/dianying_hl.png"
      }
    ]
  }

Tip：
1. 当设置 position 为 top 时，将不会显示 icon
2. tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

顶部标题栏的实现

可以使用 API 实现，也可以使用配置文件实现
官方文档—框架—配置
官方文档—API—设置置顶信息

• 通过 API 实现：

onLoad: function (options) {
    // other code
    wx.setNavigationBarTitle({
      title: '全部干货'
    })
    // other code
},

• 通过配置文件实现
  

在当前页面的 .json文件中添加如下代码

{
 "navigationBarTitleText":"全部干货"
}

Tip: 在除了app.json之外的其他.json配置文件只能配置window属性