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

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

<>底部导航栏的实现

官方文档—框架—配置
<http://developers.weixin.qq.com/miniprogram/dev/framework/config.html>

查阅文档后，我们的实现方式如下：
"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：

* 当设置 position 为 top 时，将不会显示 icon
* tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
<>顶部标题栏的实现

可以使用 API 实现，也可以使用配置文件实现
官方文档—框架—配置
<http://developers.weixin.qq.com/miniprogram/dev/framework/config.html>
官方文档—API—设置置顶信息
<http://developers.weixin.qq.com/miniprogram/dev/api/ui.html#wxsettopbartextobject>

* 通过 API 实现： onLoad: function (options) { // other code
wx.setNavigationBarTitle({ title: '全部干货' }) // other code },
* 通过配置文件实现
在当前页面的.json文件中添加如下代码
{ "navigationBarTitleText":"全部干货" }
Tip: 在除了app.json之外的其他.json配置文件只能配置window属性

热门工具换一换