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

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

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

底部导航栏的实现

官方文档—框架—配置

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

"tabBar":{"borderStyle":"white","position":"bottom","list":[{"pagePath":"pages/reading/reading","text":"干货","iconPath":"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 codewx.setNavigationBarTitle({title: '全部干货'})// other code
},

• 通过配置文件实现

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

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

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