uview1.x自定义tabbar_uview 自定义tabbar

文档链接

1. 在pages.json中正常定义tabbar逻辑和字段， 只需配置tabBar字段list中的pagePath属性即可

	"list": [{
				"pagePath": "pages/tabBar/Home/home"
				// "text": "首页",
				// "iconPath": "static/img/Home.png",
				// "selectedIconPath": "static/img/Home-select.png"
			},
			{
				"pagePath": "pages/tabBar/Information/information"
				// "text": "快讯",
				// "iconPath": "static/img/Information.png",
				// "selectedIconPath": "static/img/Information-select.png"
			},
			{
				"pagePath": "pages/card/card-list"
				// "text": "卡包",
				// "iconPath": "static/img/Ship-icon.png",
				// "selectedIconPath": "static/img/Ship-select-icon.png"
			},
			{
				"pagePath": "pages/tabBar/Members/members"
				// "text": "会员",
				// "iconPath": "static/img/members.png",
				// "selectedIconPath": "static/img/members-select.png"
			},
			{
				"pagePath": "pages/tabBar/My/my"
				// "text": "我的",
				// "iconPath": "static/img/My.png",
				// "selectedIconPath": "static/img/My-select.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
28
29
30

2.在各个tabbar页面引入u-tabbar组件，组件会默认自动通过uni.hideTabBar()隐藏系统tabbar

<template>
	<view>
		<view class="u-page">
			<!-- 所有内容的容器 -->
		</view>
		<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
		<u-tabbar v-model="current" :list="tabbar" :mid-button="true"></u-tabbar>
	</view>
</template>

import {tabbar} from "../../../common/common.js"

		data() {
			return {
				current:3,
				tabbar:tabbar,
			}
		}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

3.通过vuex引用同一份tabbar组件的list参数，这样可以做到修改某一个页面的u-tabbar数据，其他页面的u-tabbar也能同步更新

// common.js
export const tabbar = [{
		iconPath: "http://djck-oss.oss-cn-hangzhou.aliyuncs.com/uploads/tabbar/1.png",
		selectedIconPath: "http://djck-oss.oss-cn-hangzhou.aliyuncs.com/uploads/tabbar/1-1.png",
		text: '首页',
		customIcon: false,
		pagePath: '/pages/tabBar/Home/home'
	},
	{
		iconPath: "http://djck-oss.oss-cn-hangzhou.aliyuncs.com/uploads/tabbar/2.png",
		selectedIconPath: "http://djck-oss.oss-cn-hangzhou.aliyuncs.com/uploads/tabbar/2-2.png",
		text: '快讯',
		customIcon: false,
		pagePath: '/pages/tabBar/Information/information'
	},
	{
		iconPath: "http://djck-oss.oss-cn-hangzhou.aliyuncs.com/uploads/tabbar/3.png",
		selectedIconPath: "http://djck-oss.oss-cn-hangzhou.aliyuncs.com/uploads/tabbar/3-3.png",
		text: '卡包',
		midButton: true,
		customIcon: false,
		pagePath: '/pages/card/card-list',
	},
	{
		iconPath: "http://djck-oss.oss-cn-hangzhou.aliyuncs.com/uploads/tabbar/4.png",
		selectedIconPath: "http://djck-oss.oss-cn-hangzhou.aliyuncs.com/uploads/tabbar/4-4.png",
		text: '会员',
		customIcon: false,
		pagePath: '/pages/tabBar/Members/members',
	},
	{
		iconPath: "http://djck-oss.oss-cn-hangzhou.aliyuncs.com/uploads/tabbar/5.png",
		selectedIconPath: "http://djck-oss.oss-cn-hangzhou.aliyuncs.com/uploads/tabbar/5-5.png",
		text: '我的',
		customIcon: false,
		pagePath: '/pages/tabBar/My/my',
	},
]


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

组件内部会自动处理各种跳转的逻辑