概述
虽然小程序有原生 tabBar 配置实现,但是如果用户需求中出现一些例如 根据实际业务而增加、减少项,故使用自定义 Tabbar 功能更加符合实际业务需求,在本篇总结 Vant 组件库提供了视图层和逻辑层的代码实现
分析
功能实现分成两部分进行,首先是将自定义 Tabbar 写成组件,第二部分是页面引入组件后的调整;
- 第一部分
- 在根目录下新建文件夹 命名为
custom-tab-bar
custom-tab-bar
文件夹下右键新建component
取名为index
- 在根目录下新建文件夹 命名为
- 第二部分
- 在需要使用自定义 Tabbar 的页面
json
文件中引入写好的custom-tab-bar
组件 - 引入后则来到
wxml
中示例化组件 - 最后在
js
文件的声明周期函数onshow
中调用this.getTabBar().init()
确保组件跳转页面与图标的切换保持一致
- 在需要使用自定义 Tabbar 的页面
注意
- 需要将自定义组件的文件夹放到与
pages
文件夹 同级位置 - 具体操作可看 Vant 组件库 文档 ,引入组件,传递参数,复用性更强
- 开始了自定义的 tabbar 后,需要动态计算可展示区域的高度
代码Part 1 - 组件实现
{
"component": true,
"usingComponents": {
"van-tabbar": "@vant/weapp/tabbar/index",
"van-tabbar-item": "@vant/weapp/tabbar-item/index"
}
}
<van-tabbar active="{{ active }}" bind:change="onChange" active-color="#6BBB6F">
<!-- info 为显示徽标数量 -->
<van-tabbar-item info="" wx:for="{{list}}" wx:key="index">
<image slot="icon" src="{{item.icon }}" mode="aspectFit" style="width: 30px; height: 18px;" />
<image slot="icon-active" src="{{ item.active }}" mode="aspectFit" style="width: 30px; height: 18px;" />
<text>{{item.text}}</text>
</van-tabbar-item>
</van-tabbar>
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
active: 0, //切换控制器
list: [{
url: "/pages/index/index",
icon: "../image/tarBar/icon01.png",
active: "../image/tarBar/icon01_on.png",
text: "首页",
}, {
url: "/pages/demo1/demo1",
icon: '../image/tarBar/icon02.png',
active: "../image/tarBar/icon02_on.png",
text: "分类",
}, {
url: "/pages/demo2/demo2",
icon: "../image/tarBar/icon03.png",
active: "../image/tarBar/icon03_on.png",
text: "购物车",
}, {
url: "/pages/mine/mine",
icon: "../image/tarBar/icon04.png",
active: "../image/tarBar/icon04_on.png",
text: "我的",
}]
},
/**
* 组件的方法列表
*/
methods: {
onChange: function (e) {
var that = this;
let list = that.data.list;
that.setData({
active: e.detail,
});
// console.log(that.data.active);
wx.switchTab({
url: list[e.detail].url,
})
},
init() {
const page = getCurrentPages().pop();
console.log(page);
this.setData({
active: this.data.list.findIndex(item => item.url === `/${page.route}`)
});
}
}
})
/**
* 总结:
* 1.使用 onChange 函数 已经能简单 实现点击跳转页面的功能,但是图标的选中状态出现混乱,
* 1.1 为解决此问题,需要通过在引用组件页面的 js 中的 onshow 生命周期中调用 this.getTarBar().init()方法
* 1.2 思考:为什么需要在引用组件页面的js 中的 onshow 生命周期中引用 init方法 ?
* 1.3 分析 :
* 数组的 pop() 方法 : 移除数组的最后一个元素,并返回该元素
* findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置
* 1.3.1 了解下 init()方法内的执行语句:
* 声明变量存放 获取到的当前页面路径
* page.route 跳转到当前页面 === item.url 如果符合条件则返回index
* 将此下标 setData 给 active
*
*
*
* 2. 虽然在 app.json 文件中已经开启自定义 tabBar 声明 , 但也还是需要在 tabBar-list 中将目标页面设置到 pagePath 中
* 否则使用 api - wx.switchTab 报错且无法跳转
*/
代码Part 2 - 组件使用
在这里选取 首页页面 使用自定义 Tabbar 代码
{
"usingComponents": {
"custom-tab-bar":"/custom-tab-bar/index"
},
"navigationBarTitleText": "首页"
}
<custom-tab-bar></custom-tab-bar>
Page({
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
var that = this;
that.getTabBar().init();
},
})