由于各种原因微信自带的tabbar 无法满足我们的需求，所以采用自定义tabbar。
自定义tabbar 有几种方式，其中一种是所有的子页面都用page，tabbar 切换的时候用navigator 跳转，这种方式页面会跳动闪，体验不是很好。
我采用的是将tabbar子页面都写成component，tabbar 切换的时候，显示不同的component。其中tabbar采用的是 vant 的tabbar组件 ,效果如下图所示。
页面切换效果
项目结构
项目结构
demo简介
首先引入vant的tabbar框架，我没有使用npm 安装，是直接下载之后引入相关的组件，需要引入的文件夹，如上图所示
创建main主页面page ,用于管理整个tabbar和子页面
main page index.js
// pages/main/index.js
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
tabbar: [
{
name: "页面1",
iconPath: "home-o",
tips:'',
selected: true
},
{
name: "页面2",
iconPath: "search",
tips:'1',
selected: false
},
{
name: "页面3",
iconPath: "friends-o",
tips: '',
selected: false
},
{
name: "页面4",
iconPath: "setting-o",
tips:'4',
selected: false
}
],
tabbarHeight: app.isIPhoneX ? 84 : 50, // 底部tabbar高度
activeIndex: 0, // 选中的tab
scrollTopArray: [], // 记录每个页面的滚动位置
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.data.tabbar.forEach((item, index, arr) => {
this.data.scrollTopArray[index] = 0;
// item.isFirstLoad = true
});
wx.setNavigationBarTitle({
title: this.data.tabbar[0].name,
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
this.updateSubPageShowHide(this.data.activeIndex);
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},
onChange(event) {
if (event.detail == this.data.activeIndex) return;
this.updateSubPageShowHide(event.detail);
this.setData({
activeIndex: event.detail,
pageName: this.data.tabbar[event.detail].name
})
// 还原子页面的滚动位置
wx.pageScrollTo({
duration: 0,
scrollTop: this.data.scrollTopArray[event.detail]
})
},
// 记录每个子页面的滚动位置
onPageScroll(e) {
this.data.scrollTopArray[this.data.activeIndex] = e.scrollTop;
},
// 更新组件的show hide 生命周期
updateSubPageShowHide(currentIndex) {
this.data.tabbar.forEach(function (value, i) {
if (i == currentIndex) {
value.selected = true;
wx.setNavigationBarTitle({
title: value.name,
})
} else {
value.selected = false;
}
})
this.setData({
tabbar: this.data.tabbar,
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () { },
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {}
})
main page index.wxml
<!--pages/main/index.wxml-->
<view class='main-wrapper' style='margin-bottom:{{tabbarHeight}}px;'>
<page1 wx:if='{{activeIndex == 0}}' onShow="{{tabbar[0].selected}}"></page1>
<page2 wx:if='{{activeIndex == 1}}' onShow="{{tabbar[1].selected}}"></page2>
<page3 wx:if='{{activeIndex == 2}}' onShow="{{tabbar[2].selected}}"></page3>
<page4 wx:if='{{activeIndex == 3}}' onShow="{{tabbar[3].selected}}"></page4>
</view>
<van-tabbar active="{{ activeIndex }}" bind:change="onChange">
<van-tabbar-item wx:for="{{tabbar}}" wx:key="{{index}}" icon="{{item.iconPath}}" info="{{item.tips}}">{{item.name}}
</van-tabbar-item>
</van-tabbar>
main page index.json
{
"usingComponents": {
"van-tabbar": "../../components/vant-weapp/tabbar/index",
"van-tabbar-item": "../../components/vant-weapp/tabbar-item/index",
"page1":"../subPages/page1/index",
"page2": "../subPages/page2/index",
"page3": "../subPages/page3/index",
"page4": "../subPages/page4/index"
}
}
子页面的js
// pages/main/page1/index.js
const app = getApp()
Component({
/**
* 组件的属性列表
*/
properties: {
height: {
type: Number,
value: app.homePageHeight
},
onShow: {
type: Boolean,
value: false,
observer: 'onShowHideChange'
},
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
// 子页面的生命onshow onhide 在这里处理
onShowHideChange(show) {
if(show){
console.log('page1 show')
}else{
console.log('page1 hide')
}
},
}
})
附上demo
