uni小程序 uview 1.8.8自定义tabBar_uview 自定义tabbar

官网;安装 | uView - 多平台快速开发的UI框架 - uni-app UI框架 (uviewui.com)

先创建一个components文件，里面放置TabBar-TabBar.vue

<template>
	<view>
		<u-tabbar v-model="current" :list="list" :mid-button="true" @change="ChangBar"></u-tabbar>
	</view>
	<!-- <image src="../../static/icon/我的.png" mode=""></image> -->
</template>
 
<script>
	export default {
		data() {
			return {
				list: [{
						"pagePath": "/pages/index/index",
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						// count: 2,
						// isDot: true,
						customIcon: false,
					},
					// {
					// 	"pagePath": "pages/Projection/Projection",
					// 	iconPath: "photo",
					// 	selectedIconPath: "photo-fill",
					// 	text: '放映厅',
					// 	customIcon: false,
					// },
					{
						"pagePath": "/pages/Scancode/Scancode",
						iconPath: "https://cdn.uviewui.com/uview/common/min_button.png",
						selectedIconPath: "https://cdn.uviewui.com/uview/common/min_button_select.png",
						text: '发布',
						midButton: true,
						customIcon: false,
					},
					// {
					// 	"pagePath": "pages/live/live",
					// 	iconPath: "play-right",
					// 	selectedIconPath: "play-right-fill",
					// 	text: '直播',
					// 	customIcon: false,
					// },
					{
						"pagePath": "/pages/mine/mine",
						"iconPath": "account",
						"selectedIconPath": "account-fill",
						"text": '我的',
						// "count": 23,
						"isDot": false,
						"customIcon": false,
					},
				],
				current: 0
			}
		},
		methods: {
			ChangBar(e) {
				console.log(e,'0999')
				uni.switchTab({
					url: this.list[e].pagePath
				})
			}
		}
	}
</script>
 
<style>
 
</style>

在mian.js引入

// 挂载tabBar
import tabBar from "components/Tabbar/Tabbar.vue"//引入我们自己定义的tabBar组件
Vue.component('tab-bar', tabBar)//使用tabBar组件

在需要的页面使用组件

在pages里面配置tabBar

	"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#3cc51f",
		"borderStyle": "white",
		"backgroundColor": "#f4f5f7",
		// "custom": true,
		"list": [{
				"pagePath": "pages/index/index",
				// "iconPath": "static/icon/首页.png",
				// "selectedIconPath": "static/icon/首页 1.png",
				"text": "首页",
				"count": 2,
				"isDot": true,
				"customIcon": false
			},
			{
				"pagePath": "pages/Scancode/Scancode",
				"text": "扫码",
				"midButton": true,
				"customIcon": false
			},
			{
				"pagePath": "pages/mine/mine",
				"text": "我的",
				"isDot": false,
				"customIcon": false
			}
		],
		"current": 0
	},