基于uniapp的简单自定义公共组件mz-header-tab-tab

效果实例

自定义组件mz-header-tab

<template>
	<view class="matchHeader-status">
		<template v-for="(item,index) in list">
			<view :key="index" class="matchHeader-statusItems" :class="{currentMatchStatus:item.code==code}"
				@click="switchTabHandle(item)">
				<text class="matchHeader-name" :style="{'fontSize':fontSize}">{{item.name}}</text>
				<text class="select-line"></text>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		name: "mz-header-tab",
		props: {
			code: {
				type: String,
				default: () => {
					return ''
				}
			},
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			fontSize: {
				type: String,
				default: () => {
					return '14px'
				}
			}
		},
		data() {
			return {

			};
		},
		methods: {
			/**
			 * tab切换
			 * **/
			switchTabHandle(e) {
				this.$emit("change", e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	//状态栏
	.matchHeader-status {
		height: 40px;
		width: 100%;
		display: flex;
		flex-direction: row;
		white-space: nowrap;
		overflow-x: auto;

		.matchHeader-statusItems {
			margin-left: 22px;
			position: relative;

			.matchHeader-name {
				font-size: 14px;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #999;
			}
		}

		.matchHeader-statusItems:first-child {
			margin-left: 4px;
		}

		.currentMatchStatus {
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.matchHeader-name {
				transform: scale(1.1);
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #FF792A;
				margin-top: -2px;
			}

			.select-line {
				width: 25px;
				height: 3px;
				background: #FF792A;
				border-radius: 1px;
				margin-top: 12px;
				display: block;
			}
		}
	}
</style>

使用案例

<template>
	<view class="orderManage-wrap">
		<!-- 状态栏 -->
		<view class="orderManage-tab">
			<view style="height: 10px;"></view>
			<mz-header-tab :list="tabList" :code="code" @change="tabChangeHandle">
			</mz-header-tab>
		</view>
		<view style="height: 54px;"></view>
		<!-- 订单列表-start -->
		<view class="orderManage-list">
			
		</view>
		<!-- 订单列表-end -->
	</view>
</template>

<script>
	
	export default {
		components: {
			
		},
		data() {
			return {
				code: '-2', //当前显示tab
				tabList: [{
						id: 0,
						name: '全部订单',
						code: '-2'
					},
					{
						id: 1,
						name: '待付订单',
						code: '0'
					},
					{
						id: 2,
						name: '已全额支付',
						code: '1'
					},
					{
						id: 3,
						name: '待收货',
						code: '5'
					},
					{
						id: 4,
						name: '已收货',
						code: '6'
					},
					{
						id: 5,
						name: '退款',
						code: '3'
					}
				]
			};
		},
		onLoad() {

		},
		onShow() {

		},
		methods: {
			/**
			 * tab切换
			 * **/
			tabChangeHandle(params) {
				console.log(params)
				this.code = params.code;
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.orderManage-wrap {
		width: $mzWidth;
		margin: 12px auto;
		display: flex;
		flex-direction: column;
	}

	//tab
	.orderManage-tab {
		width: $mzWidth;
		height: 54px;
		position: fixed;
		left: 4.265%;
		right: 4.265%;
		top: 0px;
		z-index: 5;
		background-color: #F2F2F2;
	}

	//订单列表
	.orderManage-list {
		width: 100%;
		margin: 0px auto;
		display: flex;
		flex-direction: column;
	}
</style>

<view style="border: 1px solid blue;width: 91.47%;margin: 24px auto;height: 70px;">
			<scroll-view scroll-x="true" style="width: 100%;height: 70px;white-space: nowrap;">
				<view style="height: 50px;border: 1px solid red;margin-right: 24px;display: inline-block;">1受恶意</view>
				<view style="height: 50px;border: 1px solid red;margin-right: 24px;display: inline-block;">2加油</view>
				<view style="height: 50px;border: 1px solid red;margin-right: 24px;display: inline-block;">3水电费水电费
				</view>
				<view style="height: 50px;border: 1px solid red;margin-right: 24px;display: inline-block;">4水电费水电费
				</view>
				<view style="height: 50px;border: 1px solid red;margin-right: 24px;display: inline-block;">5新闻</view>
				<view style="height: 50px;border: 1px solid red;margin-right: 24px;display: inline-block;">6资讯</view>
			</scroll-view>
		</view>