uniapp_v2微信小程序tabbar组件封装

renlmingj

2024 年 10 月 15 日

139 次浏览

暂无评论

1474字数

uniapp_v2

##### 一、在 components 中新建 navTab 文件夹并新建 navTab.vue文件

###### 1、写入 html 代码

```html
<template>
	<view class="wrap-box">
		<view class="wrap_">
			<view class="nav" @click="navClick(index)" v-for="(item,index) in menus" :key="item.address">
				<text class="text" :class="active == index ? 'text-active' : ''">{{item.name}}</text>
			</view>
		</view>
	</view>
</template>
```

###### 2、写入 css 代码

```scss
.wrap-box {
	width: 100%;
	height: 100%;
	position: relative;
	background-color: #101010;

.wrap_ {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		box-sizing: border-box;
		padding: 20rpx 50rpx 30rpx 50rpx;
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;

.nav {
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 10rpx;

.text {
				color: #FAFAFA;
				opacity: .3;
			}

.text-active {
				color: #FAFAFA;
				opacity: 1;
			}
		}
	}
}
```

###### 3、写入 js 代码

```js
export default {
	name: "navTab",
	data() {
		return {

};
	},
	props: {
		// 判断是第几个
		active: {
			type: String,
			default: ''
		},
		menus: {
			type: Array,
			default: []
		}
	},
	methods: {
		navClick(e) {
			if (this.active == e) return;
			this.$emit('navClick', e);
		},
	},
}
```

##### 二、父组件调用

###### 1、html 代码

```html
<navTab :active="activePage" :menus="menus" @navClick="navClick"></navTab>
```

###### 2、js代码

```js
export default {
	data() {
		return {
          		activePage: 1,
			menus: [],
		}
	},
	methods: {
		// nav 切换
		navClick(e) {
			if (this.activePage == e) return;
			this.activePage = e;
		},
	}
}
```

##### 三、效果展示

![效果图](https://www.renlmingj.cn/usr/uploads/2024/10/3432684069.png)

最后修改：2024 年 10 月 15 日