uni-app--H5自定义tabbar_uniapp custom-tab-bar

uni-app–H5自定义tabbar

  uni-app官方自定义custom-tab-bar

  custom-tab-bar它仍然读取 pages.json 里配置的tabBar信息，但这个组件可以自定义摆放的位置，可以灵活的配置各种css。该组件支持 pages.json 中 tabBar 相关配置（兼容性和 H5 保持一致）， 其中不支持 borderStyle 配置。

1. 修改pages.json 中 tabBar 相关配置

  pages.json 中 tabBar 相关配置,基本不变，但是list数组里面的pagePath需求重新自定义，而不能再是原先的真实页面路径，把原先真实页面路径修改为一个不存在的路径，但是每一个新的pagePath，要能够和原先的真实页面路径对应起来。这个还要在其它地方用的到。

  原先tabBar

	"tabBar": {
		"color": "#007aff",
		"selectedColor": "#ff0000",
		"backgroundColor": "#FFFFFF",
		"borderStyle":"black",
		"list":[
			{
				"text":"首页",
				"pagePath":"pages/index/index",
				"iconPath":"static/tabs/home.png",
				"selectedIconPath":"static/tabs/home-active.png"
			},
			{
				"text":"消息",
				"pagePath":"pages/message/message",
				"iconPath":"static/tabs/message.png",
			    "selectedIconPath":"static/tabs/message-active.png"
			},
			{
				"text":"新闻",
				"pagePath":"pages/news/news",
				"iconPath":"static/tabs/contact.png",
				"selectedIconPath":"static/tabs/contact-active.png"
			}
		]
	},

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

  修改后的tabBar：

	"tabBar": {
		"color": "#007aff",
		"selectedColor": "#ff0000",
		"backgroundColor": "#FFFFFF",
		"borderStyle":"black",
		"list":[
			{
				"text":"首页",
				"pagePath":"pages/tabBar/index",
				"iconPath":"static/tabs/home.png",
				"selectedIconPath":"static/tabs/home-active.png"
			},
			{
				"text":"消息",
				"pagePath":"pages/tabBar/message",
				"iconPath":"static/tabs/message.png",
			    "selectedIconPath":"static/tabs/message-active.png"
			},
			{
				"text":"新闻",
				"pagePath":"pages/tabBar/news",
				"iconPath":"static/tabs/contact.png",
				"selectedIconPath":"static/tabs/contact-active.png"
			}
		]
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

2. 在需要显示tabbar的页面，引入custom-tab-bar组件

<template>
	<view>
		这是custom页面
		<custom-tab-bar class="tab-bar-flex" direction="vertical" :show-icon="true" :selected="current" @onTabItemTap="toSecondMenu" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				indexPage: [{
					tabBar: '/pages/tabBar/index',
					index: '/pages/index/index'
				}, {
					tabBar: '/pages/tabBar/message',
					index: '/pages/message/message'
				}, {
					tabBar: '/pages/tabBar/news',
					index: '/pages/news/news'
				}]
			}
		},
		methods: {
			toSecondMenu(e) {
				const activeTabBar = '/' + e.pagePath
			
				for(const item of this.indexPage) {
					if (activeTabBar === item.tabBar) {
										console.log( item.tabBar,item.index, 'xxx')
						uni.redirectTo({
							url: item.index
						})
					}
				}
			}
		}
	}
</script>

<style>
	.tab-bar-flex {
		width: 360px;
	}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

  效果如下：

  点击后可正常跳转：