uniapp实现自定义tabbar【直用版】

最新推荐文章于 2025-06-27 06:30:00 发布

@SanQi

最新推荐文章于 2025-06-27 06:30:00 发布

阅读量3k

点赞数 2

CC 4.0 BY-SA版权

文章标签： uni-app 前端

本文链接：https://blog.csdn.net/m0_66956057/article/details/137405401

1.pages.json中将tabBar下面全部注释掉

2.在common文件夹下面建一个tabbar文件夹，里面放个tabbar.vue（位置，名称自己随意）

tabbar.vue:(直接复制)

<template>
	<view class="tabbar">
		<view class="tab" v-for="(item,index) in tabbarList" :key="index" @tap='navigatorTo(item.pagePath)'>			
				<image v-if="item.pagePath === 'release'" :src="item.iconPath" class="addIco" @click="to_release"></image>
				<view  v-else>
					<image v-if="item.pagePath === cureentPage" :src="item.selectedIconPath"></image>
					<image v-else :src="item.iconPath"></image>
				</view>
				<!-- <view class="text"> {
  
  {item.text}} </view>		 -->
		</view>
	</view>
</template>
<script>
	export default {
		props:{
			c