book-hi/pages-mall/components/navbar-tab-search.vue

<template>
	<view class="navbar" :style="[{ minHeight: navBarHeight + 'px' }]">
		<view class="searchTabhead">
			<Navbar :title="title"></Navbar>
			<view class="searchbox" v-if="isSearch">
				<u-search :placeholder="placeholder" :showAction="false"  bg-color="#F4F5F8"></u-search>
			</view>
			<!-- <view class="tab-slot" :style="{'height':navBarHeight+'px'}">
				<view class="tab" v-for="(tab, index) in tabOps" :key="index" :class="{ active: tabIndex == index }" @click="change(tab, index)">{{ tab.label }}</view>
			</view> -->
			<view class="tab-slot" >
				<u-tabs :is-scroll="true" :list="tabOps" :current="tabIndex" @change="change"></u-tabs>
			</view>
		</view>
		<view v-if="isSearch" class="siteBar" :style="[{ height: navBarHeight*2 + menuHeight+statusBarHeight+ 'px' }]"></view>
		<view class="siteBar" v-else :style="[{ height: navBarHeight + menuHeight+statusBarHeight+ 'px' }]"></view>
	</view>
</template>

<script>
const app = getApp();
export default {
	name: 'navbar-tab-search',
	props: {
		// 标题
		title: {
			type: String,
			default: '标题'
		},
		// 占位内容
		placeholder: {
			type: String,
			default: '请输入'
		},
		// 标题
		isSearch: {
			type: Boolean,
			default: false
		},
		// tab配置项
		tabOps: {
			type: Array,
			default: () => {
				return [];
			}
		}
	},
	data() {
		return {
			// 导航栏高度
			menuTop: app.globalData.menuTop,
			navBarHeight: app.globalData.navBarHeight,
			menuRight: app.globalData.menuRight,
			menuBotton: app.globalData.menuBotton,
			menuHeight: app.globalData.menuHeight,
			statusBarHeight: app.globalData.statusBarHeight,

			// 当前tab
			tabIndex: 0
		};
	},
	methods: {
		// 切换tab
		change(index) {
			console.log(index);
			this.tabIndex = index;
			this.$emit('change', index);
		},
	}
};
</script>

<style lang="scss" scoped>
.navbar {
	width: 100vw;
	overflow: hidden;
}
.searchTabhead {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 899;
	width: 100%;
	background-color: $app-theme-bg-color;
}
.searchbox{
	width: 100%;
	height: 100%;
	padding: 0 30rpx;
	box-sizing: border-box;
	background-color: $app-theme-bg-color;
}

.tab-slot {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	// padding: 0 30rpx;
	box-sizing: border-box;
	// padding-top: 20rpx;
	.tab {
		font-size: 26rpx;
		font-weight: 400;
		color: $app-theme-navbar-tab-color;
		&.active {
			color: $app-theme-navbar-tab-color-active;
			position: relative;
			&::before {
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 20rpx;
				height: 4rpx;
				background: $app-theme-navbar-tab-color-active;
				border-radius: 2rpx;
			}
		}
	}
}
</style>