详细介绍uniapp小程序自定义底部tabbar样式的方法-Toy模板网

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

uniapp自带的tabbar组件可以方便地实现底部导航栏的功能，原生tabBar是相对固定的配置方式，但是默认的样式可能无法满足我们的需求，所以我们需要自定义设置tabbar样式。下面我会详细介绍uniapp自定义tabbar样式的方法。

一、pages.json代码

pages.json这里只配置页面路径就可以。

"tabBar": {
		
		"color": "#7A7E83",
		"selectedColor": "#086d5b",
		"backgroundColor": "#ffffff",
		"list": [
			{
				"pagePath": "pages/xxx/xxx"
			},
			{
				"pagePath": "pages/xxx/xxx"
			},
			{
				"pagePath": "pages/xxx/xxx"
			}
		]
		
	},

二、创建一个tabBar.vue组件

在uniapp项目的components目录下创建一个名为tabbar的组件，该组件包含了tabbar的整体布局和动态切换效果。

tabbar.vue组件HTML部分代码如下：

<template>
	<view class="tabbar" >
	    <view class="tabbar-item" v-for="(item,index) in list" :key="index"         
         @click="changeTab(index)">
			<view class="select"  v-if="current == index">
				<view class="i-t position">
					<image class="img imgactive" mode="widthFix" 
                        :src="item.selectedIconPath" v-if="current == index"></image>
					<image class="img" mode="widthFix" :src="item.iconPath" v-else></image>
					<view class="text active" v-if="current == index">{{item.text}}</view>
					<view class="text" v-else>{{item.text}}</view>
				</view>
			</view>
			<view v-else>
				<image class="img" mode="widthFix" :src="item.selectedIconPath" 
                    v-if="current == index"></image>
				<image class="img" mode="widthFix" :src="item.iconPath" v-else></image>
				<view class="text active" v-if="current == index">{{item.text}}</view>
				<view class="text" v-else>{{item.text}}</view>
			</view>
	    </view>
	  </view>
</template>

tabbar.vue组件JS部分代码如下：

<script>
    export default {
    
        name:"tabbar",
		props: ['current'],
        data() {
			return {
                list:  [
				          {
				          	pagePath: "页面路径",
				          	iconPath: "图标路径",
				          	selectedIconPath: "选中的图标路径",
				          	text: "文字"
				          },
				          {
				          	pagePath: "页面路径",
				          	iconPath: "图标路径",
				          	selectedIconPath: "选中的图标路径",
				          	text: "文字"
				          },
				          {
				          	pagePath: "页面路径",
				          	iconPath: "图标路径",
				          	selectedIconPath: "选中的图标路径",
				          	text: "文字"
				          }
				        ]

            }
        },

        created() {
		      uni.hideTabBar() 
		    },
			
		 methods: {
		      changeTab(e) {
		        uni.switchTab({
		          url: '/' + this.list[e].pagePath,
		        })
		      }
		    }


}

</script>

tabbar.vue组件CSS部分代码如下：

<style>
 .tabbar {
	font-size: 1.5vh;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 99;
    width: 100%;
    height: 6vh;
    display: flex;
    align-items: center;
    justify-content: space-around;
	background-color: #fff;
    padding: 20rpx 0;
  },
  .tabbar-item {
	height: 100%;
    padding: 0 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
  }
  .img {
    height: 3vh;
    width: 2.5vh;
	margin: 0 4vw;
  }
  .text {
	text-align: center;
    color: #CACACA;
  }
  .i-t{
	  font-size: 1.5vh;
	  padding:2vw 2vh;
	  position: absolute;
	  bottom: 1vh;
  }
  .select{
	width: 10vh;
	height:10vh;
	border-radius: 10vh;
	background-color: #086d5b;
	margin-bottom: 4vh;
	position: relative;
  }
  .imgactive{
	 height: 3.5vh;
	 width: 3.2vh;
	 margin: 0 2.2vw;
  }
  .text.active {
    color: #fff;
  }
</style>

css部分样式可以根据项目需要自行修改

三、在需要显示tabbar的页面中引入tabbar组件

<template>
	<view>
		<tabbar current="0"></tabbar>
	</view>
</template>

<script>
	import tabbar from '@/components/tabbar/tabbar.vue'
	export default {
		components:{
		  tabbar
		}
	}
</script>

以上就是uniapp小程序自定义底部tabbar样式的方法的详细内容啦·~文章来源地址https://www.toymoban.com/news/detail-787203.html

到了这里，关于详细介绍uniapp小程序自定义底部tabbar样式的方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！