微信小程序自定义tabBar

微信小程序自定义tabBar

本文分享一下微信小程序自定义tabBar的几种实现方式。

模拟的tabBar页面(不推荐)

使用策略

  • app.json不配置tabBar,用普通page来代替tabbar页面,暂且称之为模拟的tabbar页面。

    tabbar效果图1

  • 每个模拟的tabbar页面都需要引入自定义tabbar组件。

  1. 自定义的tabbar组件写法如下:

/components/index-tabbar/index.json

1
2
3
4
5
6
7
{
"component": true,
"usingComponents": {
"van-tabbar": "vant-weapp/tabbar/index",
"van-tabbar-item": "vant-weapp/tabbar-item/index"
}
}

/components/index-tabbar/index.wxml

1
2
3
4
5
6
7
8
<cover-view class="container">
<van-tabbar active="{{ active }}" bind:change="onChange">
<van-tabbar-item name="index" icon="home-o">首页</van-tabbar-item>
<van-tabbar-item name="category" icon="label-o">分类</van-tabbar-item>
<van-tabbar-item name="msgs" icon="comment-o">留言</van-tabbar-item>
<van-tabbar-item name="my" icon="user-o">我的</van-tabbar-item>
</van-tabbar>
</cover-view>

/components/index-tabbar/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Component({
properties: {
active: {
type: String,
value: 'index'
},
},
methods: {
onChange(event) {
wx.redirectTo({
url: `/pages/${event.detail}/index`,
})
}
}
})
  1. 模拟的tabbar页面写法如下:

/pages/home/index.json

1
2
3
4
5
{
"usingComponents": {
"index-tabbar": "/components/index-tabbar/index"
}
}

/pages/home/index.wxml

1
2
3
4
<view class="container">
<text>首页</text>
<index-tabbar active="index"></index-tabbar>
</view>
  • 跳转页面使用wx.redirectTo

总结

由于wx.redirectTo跳转页面是跳转的普通页面,页面渲染也自然会导致自定义的tabbar组件重新渲染,所以会出现底部tabbar闪一下的视觉体验,很尴尬。

Component伪装Page(还不错)

使用策略

将上述4个模拟的tabBar页面换成组件写法,然后根据条件进行wx:if控制。

  1. 改造首页,分类,留言,我的,将其由页面改为组件

/pages/home/index.json

1
2
3
{
"component": true
}

/pages/home/index.wxml

1
2
3
<view>
<text>首页</text>
</view>

/pages/home/index.js

1
Component({})
  1. index-tabbar组件改造

/components/index-tabbar/index.wxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<cover-view class="container">
<van-tabbar active="{{ active }}" bind:change="onChange">
<van-tabbar-item
wx:for="{{panels}}"
wx:for-index="index"
wx:for-item="item"
wx:key="{{index}}"
name="{{item.name}}"
icon="{{item.icon}}"
info="{{item.badge}}">
{{item.label}}
</van-tabbar-item>
</van-tabbar>
</cover-view>

/components/index-tabbar/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Component({
properties: {
active: {
type: String,
value: 'home'
},
panels: {
type: Array,
value: []
},
},
methods: {
onChange(event) {
this.triggerEvent('changeTab', event.detail)
}
}
})
  1. 入口页index改写成如下

/pages/index/index.json

1
2
3
4
5
6
7
8
9
{
"usingComponents": {
"index-tabbar": "/components/index-tabbar/index",
"home-panel": "../home/index",
"category-panel": "../category/index",
"msgs-panel": "../msgs/index",
"my-panel": "../my/index"
}
}

/pages/index/index.wxml

1
2
3
4
5
6
7
<view class="container">
<home-panel wx:if="{{activeTab == 'home'}}">首页</home-panel>
<category-panel wx:if="{{activeTab == 'category'}}">分类</category-panel>
<msgs-panel wx:if="{{activeTab == 'msgs'}}">留言</msgs-panel>
<my-panel wx:if="{{activeTab == 'my'}}">我的</my-panel>
<index-tabbar active="{{activeTab}}" panels="{{panels}}" bind:changeTab="onTabChange"></index-tabbar>
</view>

/pages/index/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Page({
data: {
activeTab: 'home',
panels: [
{ name: 'home', icon: 'home-o', label: '首页' },
{ name: 'category', icon: 'label-o', badge: '5', label: '分类' },
{ name: 'msgs', icon: 'comment-o', badge: '99+', label: '留言' },
{ name: 'my', icon: 'user-o', label: '我的' }
]
},
onTabChange(event) {
this.setData({
activeTab: event.detail
})
}
})

效果如下:

tabbar效果图2

总结

由于是通过wx:if控制组件的创建和销毁,是局部更新,所以不会导致底部tabbar的重新渲染,所以底部闪一下的问题就解决了。缺点我想是如果频繁切换tab可能导致wx:if的渲染开销大吧。

官方自定义tabBar

官方也提供了自定义tabbar的方法,见自定义 tabBar

基础库 2.5.0 开始支持,低版本需做兼容处理


扫一扫下方小程序码或搜索Tusi博客,即刻阅读最新文章!

Tusi博客

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×