本篇内容
*NavigationBar和TabBar的设置
* 多标签页面切换
为小程序添加导航栏和Tab栏，效果图如下：
效果图
-
NavigationBar
有三个地方可以对导航条进行设置
- 全局配置
在app.json中设置window
//app.json
"window": {
"navigationBarBackgroundColor": "#ededed",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "豆瓣电影"
},
- 为每个页面配置
在页面的json文件中配置
//search.json
"navigationBarBackgroundColor": "#ededed",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "搜索"
- 页面navigation-bar节点
页面导航条配置节点，用于指定导航栏的一些属性。
指路：小程序官方文档：navigation-bar
可以给每个页面配置不同的导航条，包括文字内容，背景和字体颜色，颜色切换时的动画效果等。比在json中配置的可选项更多一些。
首先添加模板文件，注意navigation-bar必须结合page-meta使用，并且必须是page-meta的第一个节点。而page-meta必须是页面第一个节点。
<!-- pages/board/board.wxml -->
<!-- page-meta必须是页面的第一个节点 -->
<page-meta>
<!-- navigation-bar必须是page-meta的第一个节点 -->
<navigation-bar
title="{{nbTitle}}"
loading="{{nbLoading}}"
front-color="{{nbFrontColor}}"
background-color="{{nbBackgroundColor}}"
color-animation-duration="2000"
color-animation-timing-func="easeIn"
/>
</page-meta>
<view>
<text>board</text>
</view>
在js文件中设置数据绑定
//pages/board/board.js
Page({
data: {
nbFrontColor: '#000000',
nbBackgroundColor: '#35495e',
},
onLoad() {
this.setData({
nbTitle: '豆瓣榜单',
nbLoading: true,
nbFrontColor: '#ffffff',
nbBackgroundColor: '#35495e',
})
},
onShow:function() {
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: 0
})
}
}
})
-
TabBar
如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
方法一
TabBar在app.json文件中进行配置。指路：微信小程序官方文档-全局配置-tabBar
//app.json
{
"tabBar": {
"color": "#c0c0c0", //文字颜色
"selectedColor": "#fff", //选中文字颜色
"borderStyle": "black", //tabBar边框颜色，只有black和white可选
"backgroundColor": "#35495e", //背景颜色
"position": "bottom", //top和botteom可选
"list": [ //tab选项，数量支持2-5个
{
"text": "榜单",
"pagePath": "pages/board/board", //页面路径，必须在app.json的pages中先定义
"iconPath": "images/board.png", //图标路径
"selectedIconPath": "images/board-actived.png"
},
{
"text": "搜索",
"pagePath": "pages/search/search",
"iconPath": "images/search.png",
"selectedIconPath": "images/search-actived.png"
}
]
}
}
方法二：自定义tabBar
如果需要对tabbar进行更多个性化的配置，可以采用自定义的方式。指路：微信小程序官方文档：custom-tabbar
-
首先在app.json
中的tabBar加入"custom": true（其他项目也配置好），声明 usingComponents 项
{
"tabBar": {
"custom": true, //开启自定义
"color": "#c0c0c0",
"selectedColor": "#fff",
"backgroundColor": "#35495e",
"list": [{
"pagePath": "page/board/board",
"text": "榜单"
}, {
"pagePath": "page/search/search",
"text": "搜索"
}]
},
"usingComponents": {} //在此全局声明自定义组件，或在每个页面的json文件中声明
}
-
在根目录下新建文件夹custom-tab-bar
项目目录
index.js
Component({ //Component 构造器可用于定义组件，调用 Component 构造器时可以指定组件的属性、数据、方法等
data: { //组件数据，此处对应tabBar中的配置数据
selected: 0, //选中tab的index，从0开始
color: "#c0c0c0", //字体颜色
selectedColor: "#000", //选中字体颜色
list: [{ //tab列表,没有数量限制，可以大于5个
pagePath: "/pages/board/board", //这里的路径和app.json中的tabBar里定义的不同，最前边必须要加斜杠‘/’，tabBar里不可以加‘/’
iconPath: "/images/board.png",
selectedIconPath: "/images/board-actived.png",
text: "榜单"
}, {
pagePath: "/pages/search/search",
iconPath: "/images/search.png",
selectedIconPath: "/images/search-actived.png",
text: "搜索"
}]
},
attached() {
},
methods: {
switchTab(e) {
const data = e.currentTarget.dataset //获取事件对象的数据
const url = data.path //页面url
wx.switchTab({url}) //跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
// this.setData({ //微信小程序文档给的示例上有这几行，但我试了注释掉没有影响。
// selected: data.index //但是每个页面的js文件中必须设置selected
// })
}
}
})
index.wxml
此时需要开发者提供一个自定义组件来渲染 tabBar，所有 tabBar 的样式都由该自定义组件渲染。推荐用 fixed 在底部的 cover-view + cover-image 组件渲染样式，以保证 tabBar 层级相对较高。
cover-view:
覆盖在原生组件之上的文本视图。
可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher
<!--miniprogram/custom-tab-bar/index.wxml-->
<cover-view class="tab-bar">
<cover-view class="tab-bar-border"></cover-view>
<cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
<cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
<cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
</cover-view>
</cover-view>
index.json和index.wxss见官方示例 custom-tabbar
-
页面js文件
board.js
//pages/board/board.js
Component({
pageLifetimes: {
show() {
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: 0
})
}
}
}
})
自定义tabBar的官方示例片段中用的Component({})，小程序文档中说到：
事实上，小程序的页面也可以视为自定义组件。因而，页面也可以使用 Component 构造器构造，拥有与普通组件一样的定义段与实例方法。但此时要求对应 json 文件中包含 usingComponents 定义段。
L0中是用的Page({})注册的页面，这里可以对应的这样写：
//pages/board/board.js
Page({
onShow:function() {
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: 0
})
}
}
})
search.js里把selected设置成1就可以了，其他代码一样。
补充：到后边发现，当把内容上拉到最底部的时候，自定义的tabBar会遮挡内容。需要注意处理一下。如果原有的tab栏可以满足功能，就不用自定义了。
自定义tabBar
直接在app.json中配置的不会遮挡
总结：
本篇学习记录了微信小程序中NavigationBar和TabBar的使用方法。
参考：
微信小程序官方文档：navigation-bar
微信小程序官方文档：tabBar
网友评论