【uniapp】开发微信小程序自定义底部tabbar

自定义tabBar的性能体验会低于原生tabBar，小程序端非必要不要自定义。但原生tabBar是相对固定的配置方式，可能无法满足所有场景，这就涉及到自定义tabBar。

一、使用流程

1、配置信息

在 pages.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整

"tabBar": {
    "color": "#ffffff",
	"selectedColor": "#6777FD",
	"custom": true,
	"list": [{},{},{}]
}

2、添加tabBar代码文件

①自定义公共组件

在components目录下新建组件页面CustomTabBar，在CustomTabBar.vue中开发自定义组件

	


export default {
	props: {
		selected: Number
	},
	data() {
		return {
			color: "#fff",
			selectedColor: "#6777FD",
			list: [{},{},{}]
		}
	},
	methods: {
		switchTab(url) {
			uni.switchTab({
				url
			})
		}
	}
}

在需要用到tabBar的页面引入注册并使用组件，通过父子组件通信的方式传参当前是哪个索引页面selected，在子组件通过props接收并使用

	import CustomTabBar from "@/components/CustomTabBar/CustomTabBar.vue"
	export default {
		components: {
			CustomTabBar
		}
	}


	
		
	

②自定义tabbar

在根目录创建custom-tab-bar文件夹，里面创建index.js、index.json、index.wxml、index.wxss文件进行开发，而不是vue文件，uniapp编译器会直接拷贝该目录到微信小程序中。

在index.js中：

Component({
  /**
   * 组件的属性列表
   */
  properties: {
  },
  /**
   * 组件的初始数据
   */
  data: {
    selected: 0,
    color: "#fff",
    selectedColor: "#6777FD",
    list: [{},{},{}]
  },
  /**
   * 组件的方法列表
   */
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({ url })
    },
  }
})

注意：如需实现 tab 选中态，要在当前页面下，通过 getTabBar 接口获取组件实例，并调用 setData 更新选中态

onShow() {
	// 原生微信小程序
	 if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0
      })
    }
	// vue2
	if (typeof this.$mp.page.getTabBar === 'function' && this.$mp.page.getTabBar()) {
		this.$mp.page.getTabBar().setData({
			selected: 0
		})
	}
	// vue3
	if (typeof this.scope.page.getTabBar === 'function' && this.scope.page.getTabBar()) {
		this.scope.page.getTabBar().setData({
			selected: 0
		})
	}
}

二、具体案例

在pages.json中：

"tabBar": {
	"color": "#ffffff",
	"selectedColor": "#6777FD",
	"custom": true,
	"list": [{
			"pagePath": "pages/aboutFind/use/use",
			"iconPath": "static/image/icon_find2.png",
			"selectedIconPath": "static/image/icon_find1.png",
			"text": "使用"
		},
		{
			"pagePath": "pages/index/index",
			"iconPath": "static/image/icon_go2.png",
			"selectedIconPath": "static/image/icon_go1.png",
			"text": "通行"
		},
		{
			"pagePath": "pages/myInfo/myInfo",
			"iconPath": "static/image/icon_set2.png",
			"selectedIconPath": "static/image/icon_set1.png",
			"text": "我的"
		}
	]
}

①自定义公共组件

在CustomTabBar.vue中：

	
		
			
				
					
					
					{{item.text}}
				
			
		
	


export default {
	props: {
		selected: Number
	},
	data() {
		return {
			color: "#fff",
			selectedColor: "#6777FD",
			list: [{
					pagePath: "/pages/aboutFind/use/use",
					text: "使用",
					iconPath: "/static/image/icon_find2.png",
					selectedIconPath: "/static/image/icon_find1.png"
				},
				{
					pagePath: "/pages/index/index",
					text: "通行",
					iconPath: "/static/image/icon_go2.png",
					selectedIconPath: "/static/image/icon_go1.png",
					search: true
				},
				{
					pagePath: "/pages/myInfo/myInfo",
					text: "我的",
					iconPath: "/static/image/icon_set2.png",
					selectedIconPath: "/static/image/icon_set1.png"
				}
			]
		}
	},
	methods: {
		switchTab(url) {
			uni.switchTab({
				url
			})
		}
	}
}


.tabBar {
	z-index: 100;
	width: 100%;
	position: fixed;
	bottom: 0;
	font-size: 28rpx;
	background-color: #fff;
	color: #636363;
	border-radius: 50rpx 50rpx 0px 0px;
}
.cont {
	z-index: 0;
	height: calc(100rpx + env(safe-area-inset-bottom) / 2);
	padding-bottom: 30rpx;
	display: flex;
	justify-content: space-around;
	.item {
		font-size: 24rpx;
		position: relative;
		width: 15%;
		text-align: center;
		padding: 0;
		display: block;
		height: auto;
		line-height: 1;
		margin: 0;
		background-color: inherit;
		overflow: initial;
		justify-content: center;
		align-items: center;
		padding-top: 20rpx;
	}
	.item:first-child {
		right: 45rpx;
	}
	.item:last-child {
		left: 45rpx;
	}
	.item image:first-child {
		width: 43rpx !important;
		height: 43rpx !important;
		margin: auto
	}
	.item image:last-child {
		width: 41rpx !important;
		height: 43rpx !important;
		margin: auto
	}
	.txt {
		margin-top: 20rpx;
	}
	.on {
		position: relative;
	}
	.on:not(:nth-child(2)):before {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		width: 100%;
		height: 6rpx;
		background-color: #00BCD4;
		border-radius: 120rpx !important;
	}
	.search {
		position: absolute;
		left: 50%;
		transform: translate(-50%, 0);
		top: -50rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.search image {
		width: 100rpx !important;
		height: 100rpx !important;
		z-index: 2;
		border-radius: 100%;
	}
	.search .txt {
		margin-top: 26rpx;
	}
	.selectedColor {
		color: #00BCD4;
	}
}

在使用到CustomTabBar.vue组件的三个页面中，如index首页：

	import CustomTabBar from "@/components/CustomTabBar/CustomTabBar.vue"
	export default {
		components: {
			CustomTabBar
		}
	}


	
	    
		
	

②自定义tabbar

在index.js中：

Component({
  /**
   * 组件的属性列表
   */
  properties: {
  },
  /**
   * 组件的初始数据
   */
  data: {
    selected: 0,
    color: "#fff",
    selectedColor: "#6777FD",
    list: [
      {
        pagePath: "/pages/aboutFind/use/use",
        text: "使用",
        iconPath: "/static/image/icon_find2.png",
        selectedIconPath: "/static/image/icon_find1.png"
      },
      {
        pagePath: "/pages/index/index",
        text: "通行",
        iconPath: "/static/image/icon_go2.png",
        selectedIconPath: "/static/image/icon_go1.png",
        search: true
      },
      {
        pagePath: "/pages/myInfo/myInfo",
        text: "我的",
        iconPath: "/static/image/icon_set2.png",
        selectedIconPath: "/static/image/icon_set1.png"
      }
    ]
  },
  /**
   * 组件的方法列表
   */
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({ url })
    },
  }
})

在index.json中：

{
  "component": true,
  "usingComponents": {}
}

在index.wxml中：