uniapp 微信小程序使用uview u-tabbar组件自定义tabbar-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp 微信小程序使用uview u-tabbar组件自定义tabbar。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.在components文件下面新建TabBar.vue组件, 使用uview的u-tabbar组件进行二次封装; u-tabbar组件中value取当前匹配项的name, 一般从父组件传过来即可; 在u-tabbar-item标签内可以使用插槽 slot='inactive-icon'(选中的图标)和slot='inactive-icon'(未选中的图标)自定义图片样式

u-tabbar组件默认已经为iPhoneX等机型留出底部安全距离, 具体可以看uview官方文档

<template>
	<view>
		<u-tabbar
			:value="currentTab"
			activeColor="#2D73F0"
			inactiveColor="#333"
		>
			<u-tabbar-item 
				v-for="(item,i) in tabList" 
				:key="item.name"
				:text="item.text" 
				:name="item.name"
				@click="handTab(item)"
			>
				<image class="bar_img" slot='active-icon' :src="item.selectedIconPath"></image>
				<image class="bar_img" slot='inactive-icon' :src="item.iconPath"></image>
			</u-tabbar-item>
			
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		name:"TabBar",
		props: {
			currentTab: {
				type: String,
				default: 'home'
			}
		},
		data() {
			return {
				tabList: [
					{
						"pagePath": "/pages/home",
						"iconPath": "/static/home.png",
						"selectedIconPath": "/static/home_sec.png",
						"text": "首页",
						"name": 'home',
					},
					{
						"pagePath": "/pages/user",
						"iconPath": "/static/user.png",
						"selectedIconPath": "/static/user_sec.png",
						"text": "我的",
						"name": "user"
					}
				]
			}
		},
		methods: {
			handTab(row) {
				uni.switchTab({
					url: row.pagePath
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bar_img{
		width: 54rpx;
		height: 54rpx;
	}
</style>

2.pages.json里面配置tabBar里面的custom为true

u-tabbar,uniapp,微信小程序,uni-app,微信小程序