使用uview1.0实现自定义tabbar

点击tabbar实现页面跳转

需在pages文件中添加对应的项目，这时会自动在pages.json中配置好每一个页面的path和style，我们需要手动配置tabBar,配置的list中的每一项的pagePath可以实现点击tabber图标自动跳转到对应的页面(通过自定义tabBar中的pagePath，注意pagePath要以‘/’开头)

//pages.json
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				// "navigationStyle": "custom",
				"navigationBarTitleText": "uView UI"
			}
		},
		{
			"path": "pages/home/home",
			"style": {
				// "navigationStyle": "custom",
				"navigationBarTitleText": "工具"
			}
		},
		{
			"path": "pages/mine/mine",
			"style": {
				// "navigationStyle": "custom",
				"navigationBarTitleText": "模版"
			}
		}
    ],
	"tabBar": {
		"list": [{
				"pagePath": "pages/index/index"
			},
			{
				"pagePath": "pages/home/home"
			},
			{
				"pagePath": "pages/mine/mine"
			}
		]
	},

自定义tabBar在页面中的实现

1. 引入u-tabbar组件通过属性绑定指令 :list=“list”,来配置每一项
2. 也可通过配置每一项中的count来实现带数字的红色角标

<template>
	<view class="content">
		<h1>shouye</h1>
		<image src="/static/uview/example/component_select.png" mode=""></image>
		<u-tabbar :list="tabbar" :mid-button="true" mid-button-size="160rpx" ></u-tabbar>
	</view>
</template>

data() {
			return {
				// title: '模板',
				tabbar: ''
			}
		},
		onLoad() {
			// uni.hideTabBar(true)
			console.log('onload');
			this.tabbar = [{
					iconPath: "/static/uview/example/component.png",
					selectedIconPath: "/static/uview/example/component_select.png",
					text: '组件',
					count: 2,
					// isDot: true,
					pagePath: "/pages/index/index"
				},
				{
					iconPath: "/static/uview/example/js.png",
					selectedIconPath: "/static/uview/example/js_select.png",
					text: '工具',
					midButton: true,
					pagePath: "/pages/home/home"
				},
				{
					iconPath: "/static/uview/example/template.png",
					selectedIconPath: "/static/uview/example/template_select.png",
					text: '模板',
					pagePath: "/pages/mine/mine"
				},
			]
		}