uniapp TAB切换组件

uniapp TAB切换组件

点击查看代码

/**
* 组件名称：TAB切换组件
*/
<template>
	<view class="tab-list" :class="tabStyle ? 'tab-list-text' : ''">
		<view :class="active == index ? 'item-tab active' : 'item-tab'" v-for="(item,index) in tabList" :key="index" @click="toggle(item,index)">
			<text class="text">{{item.name}}</text>
			<text class="text text-num" v-if="! empty(item.num)">({{item.num}})</text>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex";
	export default {
		data() {
			return {
				active: this.selectIndex
			}
		},
		props: {
			//TAB切换数组
			tabList: {
				type: [Array, Object]
			},
			tabStyle: {
				type: Number
			},
			selectIndex: {
				type: [Number, String]
			}
		},
		computed: {
		},
		methods: {
			toggle: function(item,index) {
				this.$emit('tab-toggle', {
					data: item,
					index: index
				})
				
			},
			
			set_index:function(index){
				this.active = index;
			}
		}
	}
</script>

<style lang="scss">
// 选项卡
.tab-list {
	width: 100%;
	border-style: solid;
	border-width: 2rpx;
	border-radius: 50rpx;
	overflow: hidden;
	display: flex;
	justify-content: space-between;
	height: 60rpx;
	margin-top: 2rpx;
	box-sizing: border-box;

	.item-tab {
		font-size: 26rpx;
		display: flex;
		width: 100%;
		cursor: pointer;
		flex: 1;
		text-align: center;
		align-items: center;
		justify-content: center;
		background: #fff;
	}

	.active {
		color: #fff;
	}

	&.tab-list-text {
		height: 90rpx;
		background: #fff;
		border: none;
		border-radius: 0;
		margin-top: 0;

		.item-tab {
			border: none;

			.text {
				height: 90rpx;
				line-height: 86rpx;
				color: #333;
				box-sizing: border-box;
			}

			&.active {
				background: transparent;

				.text {
					border-width: 0 0 4rpx 0;
					border-style: solid;
				}
			}
		}
	}
}

.item-tab:last-child {
	border-right: 0;
}

</style>