这一节内容比较简单,实现的效果图如下
底部导航栏的实现
查阅文档后,我们的实现方式如下:
"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 code
wx.setNavigationBarTitle({
title: '全部干货'
})
// other code
},
- 通过配置文件实现
在当前页面的
.json
文件中添加如下代码
{
"navigationBarTitleText":"全部干货"
}
Tip: 在除了
app.json
之外的其他.json
配置文件只能配置window
属性