本文主要是介绍微信小程序~底部导航栏 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：
- 当设置 position 为 top 时，将不会显示 icon
- 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属性
这篇关于微信小程序~底部导航栏 Tab + 顶上 TitleBar 的实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
