微信提供了两个导航组件，一个是Navigation，另外一个是Tabbar。
现在来讲一下Tabbar的自定义组件。
一、自定义tabBar需要注意的问题
- 为了保证低版本兼容以及区分哪些页面是 tab 页，tabBar 的相关配置项需完整声明，但这些字段不会作用于自定义 tabBar 的渲染。
- 所有 tabBar 的样式都由该自定义组件渲染。推荐用 fixed 在底部的 cover-view + cover-image组件渲染样式，以保证 tabBar 层级相对较高。
- 每个 tab 页下的自定义 tabBar 组件实例是不同的，可通过自定义组件下的 getTabBar 接口，获取当前页面的自定义 tabBar 组件实例。
注意：如需实现 tab 选中态，要在当前页面下，通过 getTabBar 接口获取组件实例，并调用 setData 更新选中态。
上面这些都是微信小程序官方文档里说的。下面开始通过代码来说明应该怎么配置。
二、我们的自定义组件custom-tab-bar
如何使用：
- 在项目根目录放入custom-tab-bar页面文件夹(内含4个文件)，接着修改里面的配置
- 在app.json中加入tabBar
- 在每个需要使用tabBar的页面的json中加入：{"usingComponents": {}}，也可以在custom-tab-bar中全局声明
- 在每个需要使用tabBar的页面的js中加入判断tabBar的代码，下面会讲
1、custom-tab-bar的结构
就是一个正常的页面：
custom-tab-bar/
index.js
index.json
index.wxml
index.wxss
需要注意的是：custom-tab-bar文件夹需要放在根目录下面，作为入口文件。
- custom-tab-bar/index.js
#custom-tab-bar/index.js
Component({
data: {
selected: 0,
color: "#7A7E83",
selectedColor: "#3cc51f",
list: [{
pagePath: "/index/index",
iconPath: "/image/icon_component.png",
selectedIconPath: "/image/icon_component_HL.png",
text: "组件"
}, {
pagePath: "/index2/index2",
iconPath: "/image/icon_API.png",
selectedIconPath: "/image/icon_API_HL.png",
text: "接口"
}]
},
attached() {
},
methods: {
switchTab(e) {
const data = e.currentTarget.dataset
const url = data.path
wx.switchTab({url})
this.setData({
selected: data.index
})
}
}
})
上面是官方提供的demo，我们按上面配置即可。讲解一下比较重要的：
data:主要的配置都在这里
selected
默认选中状态，0为第一个
list
这里就是你的tabBar，需要几个就在这里面添加，最少2个，最多5个
pagePath：页面的路径
[提醒注意]--->路径的前面需要添加" / "，而app.json中list的pagePath是不能以" / "开头的，一定要注意，不然wx.switchTab在调用时会出错。
iconPath:图标路径
selectedIconPath:被选中时的图标路径
text:名称
methods方法：tabBar跳转和页面跳转
e.currentTarget.dataset：通过e调取当前页数据，点击的tabbar，即要跳转的页面
data.path：获取路径
wx.switchTab()：跳转到tabBar页面，并关闭其他所有非tabBar页面
url：需要跳转的tabBar页面的路径
success：成功回调函数
fail：失败回调函数
complete：接口调用结束回调函数
this.setData()：把下标赋值给selected
- custom-tab-bar/index.json
#custom-tab-bar/index.json
{"component": true} 这里我设置成true和false没有变化，官方文档默认是true，具体我也没研究，待定。
- 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>
官方推荐使用cover-view和cover-image，保证tabBar层级相对较高，也就是可以在其他的上面显示。
2、app.json的配置
"tabBar": {
"custom": true,
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "index/index", 此处的路径前面不加" / "
"iconPath": "image/icon_component.png",
"selectedIconPath": "image/icon_component_HL.png",
"text": "组件"
},
{
"pagePath": "index2/index2",
"iconPath": "image/icon_API.png",
"selectedIconPath": "image/icon_API_HL.png",
"text": "接口"
}
]
}
注意：tabBar页面都需要在app.json的pages中注册路径。
3、使用tabBar页面的js文件
在文件中的onShow()方法中加入下面所示代码：
onShow: function () {
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: 0
})
}
}
完成这些我们就可以使用tabBar了。如果需要跳转到非tabBar页面则不能使用wx.switchTab(Object object)方法。
写在最后：
- 如果文章中有错误或是表达不准确的地方，欢迎大家评论中指正，以便我完善。
- 文章我也会根据所学到新的知识不断更新。
网友评论