book-shop/components/navbar/navbar-top-search.vue

<template>
	<view class="slot">
		<view class="searchbox">
			<u-search
				class="search-components"
				@click="goSearchPage(url)"
				disabled
				height="70"
				:placeholder="placeholder"
				:showAction="false"
				:bg-color="searchBgColor"
				:class="showSlot ? 'active' : ''"
			></u-search>
			<slot showSlot></slot>
		</view>
		<view class="siteBar"></view>
	</view>
</template>

<script>
const app = getApp();
export default {
	name: 'navbar-tab-search',
	props: {
		pageTitle:{
			type: String,
			default: '书嗨',
		},
		// 占位内容
		placeholder: {
			type: String,
			default: '请输入'
		},
		// 是否显示插槽，用于输入框右侧内容的显示
		showSlot: {
			type: Boolean,
			default: false
		},
		// 跳转的url
		url: {
			type: String,
			default: ''
		},
		// 是否显示返回按钮
		showBack: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			// 导航栏高度
			navBarHeight: app.globalData.navBarHeight,
			statusBarHeight: app.globalData.statusBarHeight,
			menuRight: app.globalData.menuRight,
			menuBotton: app.globalData.menuBotton,
			menuHeight: app.globalData.menuHeight,
			menuTop: app.globalData.menuTop,
			// 当前tab
			current: 0,
			// 背景色
			searchBgColor: this.$appTheme.appThemeSearchBgColor
		};
	},
	
	methods: {
		// 切换tab
		change(index) {
			this.current = index;
			this.$emit('change', index);
		},

		// 去搜索页面
		goSearchPage(url) {
			uni.navigateTo({
				url
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.siteBar {
	height: 90rpx;
}
.slot-inner {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 899;
	overflow: hidden;
	background-color: #fff;
}
/* .tabList {
	display: flex;
	align-items: center;
	.tab {
		font-size: 36rpx;
		font-weight: 400;
		margin-right: 48rpx;
		color: $app-theme-navbar-tab-color;
		&.active {
			font-weight: 500;
			color: $app-theme-navbar-tab-color-active;
			font-size: 40rpx;
			position: relative;
			&::before {
				content: '';
				width: 16rpx;
				height: 6rpx;
				background: $app-theme-navbar-tab-color-active;
				border-radius: 1px;
				position: absolute;
				bottom: -10rpx;
				left: 50%;
				transform: translate(-50%, 0);
			}
		}
	}
}
 */
.inner {
	width: 100%;
	position: relative;
	height: 100%;
	background-color: $app-theme-bg-color;
	.left {
		position: absolute;
		z-index: 999;
		display: flex;
		align-items: center;
		// 防误触
		width: 30x;
		margin-right: 10px;
	}
	/* .tabList {
		width: 50%;
		position: absolute;
		z-index: 999;
		display: flex;
		align-items: center;
	} */
}
.inner-showSearch {
	width: 100%;
	height: 100%;
	background-color: $app-theme-bg-color;
	.tabList {
		display: flex;
		align-items: center;
	}
}
.searchbox {
	width: 100%;
	padding: 0 30rpx 20rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 899;
	overflow: hidden;
	background-color: #fff;
	.search-components {
		width: 100%;
		&.active {
			// width: 86%;
			margin-right: 30rpx;
		}
	}
}
</style>