uni-app自定义底部切换栏tabBar

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

原创最新推荐文章于 2025-06-27 06:30:00 发布 · 2.9k 阅读

3 ·

CC 4.0 BY-SA版权

微信小程序专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了一种使用uniApp框架实现底部导航栏的方法，包括组件的创建、样式设置及功能实现，如导航跳转等，适用于小程序和移动端应用开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
	<view class="footer-bar">
		<view class="bar-list">
			<view class="bar-item" :class="item.active?'bar-item-active':''" v-for="(item,index) in listData" :key="index" @click="tabClick(item.url)">
				<image :src="item.image" class="item-icon"></image>
				{{item.name}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		props:{
			listData:{
				type:Array,
				value:[]
			}
		},
		methods:{
			tabClick: function(url){
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	.footer-bar {
		.bar-list {
			width: 100%;
			height: 100rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			justify-content: space-around;
			align-items: center;
			background:rgba(255,255,255,1);
			box-shadow:0px 0px 0px 0px rgba(0,0,0,0.1);
			
			.bar-item{
				text-align: center;
				font-size:20rpx;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:rgba(50,60,73,1);
				text-align: center;
				
				.item-icon{
					display: block;
					width: 44rpx;
					height:44rpx;
					margin: 0 auto 8rpx auto;
				}
			}
			
			.bar-item-active{
				color:rgba(102,166,255,1);
			}
		}
	}
</style>

引用：

import uiTabBar from '@/components/ui-tab-bar/ui-tab-bar.vue'

components: {
uiTabBar
}

listData: [{
                       name: '工作',
                       url: '../index/index',
                       image: '/static/image/gz_s.png',
                       active: true,
                   },
                   {
                       name: '功能',
                       url: '../function/function',
                       image: '/static/image/work.png',
                       active: false,
                   },
                   {
                       name: '通讯录',
                       url: '../book/book',
                       image: '/static/image/book.png',
                       active: false,
                   }, {
                       name: '我的',
                       url: '../myhome/myhome',
                       image: '/static/image/myhome.png',
                       active: false,
                   }
               ],