NavBar 导航栏

				
<template>
	<zk-theme type="page" :padding="0" showBack navbarTitle="navbar">


		<!-- 1. 基础白色导航栏 -->
		<zk-theme type="card" :padding="0">
			<zk-navbar :show-back="true" title="navbar" />
		</zk-theme>
		<view class="" style="height: 180rpx;"></view>

		<!-- 基础导航栏带文字 -->

		<zk-navbar :show-back="true" :fixed="false" backText="返回" title="基础导航栏" />



		<!-- 1. 基础导航栏带首页 -->
		<view class="" style="height: 80rpx;"></view>


		<zk-navbar :show-back="true" :fixed="false" showHome title="基础导航栏" />




		<!-- 2. 渐变背景导航栏 -->
		<view class="" style="height: 80rpx;"></view>


		<zk-navbar title="渐变导航栏" :fixed="false" :background-color="'linear-gradient(45deg, #8134AF, #515BD4)'"
			color="#ffffff">
			<template #right>
				<view class="nav-btn">
					<zk-icon name="search-line" :size="44" color="#ffffff" />
				</view>
			</template>
		</zk-navbar>


		<!-- 3. 透明导航栏 -->
		<view class="" style="height: 80rpx;"></view>


		<zk-theme type="card" :padding="0">
			<zk-navbar title="透明导航栏" :fixed="false" background-color="transparent">
				<template #left>
					<view class="nav-btn nav-btn--ghost">
						<zk-icon name="arrow-left-s-line" :size="44" />
					</view>
				</template>
				<template #right>
					<view class="nav-btn nav-btn--ghost">
						<zk-icon name="search-line" :size="44" />
					</view>
				</template>
			</zk-navbar>

		</zk-theme>
		<view class="" style="height: 80rpx;"></view>
		<!-- 4. 自定义标题导航栏 -->



		<zk-navbar :fixed="false">
			<template #default>
				<view class="custom-title">
					<zk-subsection :list="['推荐', '最新', '热门']" :current.sync="current4" active-color="#07c160"
						bg-color="#e8f7ed" />
				</view>
			</template>
		</zk-navbar>


		<!-- 5. 搜索框导航栏 -->
		<view class="" style="height: 80rpx;"></view>

		<zk-navbar :fixed="false">
			<template #default>
				<view class="search-box">
					<zk-input v-model="value4" placeholder="搜索关键词" prefix-icon="search-line" border="surround"
						shape="circle" />
				</view>
			</template>
		</zk-navbar>


		<!-- 6. 带头像和按钮的导航栏 -->
		<view class="" style="height: 80rpx;"></view>


		<zk-navbar title="个人中心" :fixed="false">
			<template #left>
				<view class="">
					<zk-avatar size="small" src="https://www.zenkuai.com/attachment/demo/3.jpg" />
				</view>
			</template>
			<template #right>
				<view class="action-btn">
					<zk-text class="action-btn__text" text="编辑" color="#ffffff" :size="24" />
				</view>
			</template>
		</zk-navbar>


		<!-- 7. 带徽标的导航栏 -->
		<view class="" style="height: 80rpx;"></view>

		<zk-navbar title="消息中心" :fixed="false">
			<template #right>
				<view class="nav-btn" style="padding-top: 20rpx; padding-right: 20rpx;">
					<zk-icon name="notification-line" :size="44" color="#333333" />
					<zk-badge content="9" :offset="[-10, -5]" />
				</view>
			</template>
		</zk-navbar>


		<!-- 8. 自定义高度导航栏 -->
		<view class="" style="height: 80rpx;"></view>

		<zk-navbar :fixed="false">
			<template #default>
				<view class="large-title">
					<zk-text class="large-title__main" text="发现精彩" :size="40" weight="bold" />
				</view>
			</template>
		</zk-navbar>
		<view class="" style="height: 80rpx;"></view>
	</zk-theme>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 0,
				current4: 0,
				value4: ""
			}
		},
		methods: {
			handleTabClick(index) {
				this.currentTab = index
			}
		}
	}
</script>
<style lang="scss">
	.p2 {
		padding: 20rpx;
		background-color: #ff4d4f;
	}

	/* #ifndef APP-NVUE */
	.nav-btn {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 68rpx;
		height: 68rpx;

		&--ghost {
			background: rgba(255, 255, 255, 0.2);
			border-radius: 50%;

			&:active {
				background: rgba(255, 255, 255, 0.1);
			}
		}
	}

	.custom-title {

		width: 450rpx;
	}

	.search-box {
		width: 380rpx;

		border-radius: 36rpx;
	}

	.avatar {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		overflow: hidden;
		border: 2rpx solid #ffffff;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);

		&__img {
			width: 100%;
			height: 100%;
		}
	}

	.action-btn {
		height: 56rpx;
		padding: 0 24rpx;
		background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
		border-radius: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		&:active {
			opacity: 0.8;
		}
	}

	.badge {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		min-width: 32rpx;
		height: 32rpx;
		padding: 0 8rpx;
		background-color: #ff4d4f;
		border-radius: 16rpx;
		color: #ffffff;
		font-size: 20rpx;
		line-height: 32rpx;
		text-align: center;
	}

	.large-title {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx 0;
	}

	/* #endif */

	/* #ifdef APP-NVUE */
	.nav-btn {
		position: relative;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 68rpx;
		height: 68rpx;
	}

	.nav-btn--ghost {
		background-color: rgba(255, 255, 255, 0.2);
		border-radius: 34rpx;
	}

	.custom-title {
		width: 450rpx;
		margin-left: -20rpx;
	}

	.search-box {
		width: 380rpx;
		background-color: #ffffff;
		border-radius: 36rpx;
	}

	.avatar {
		width: 64rpx;
		height: 64rpx;
		border-radius: 32rpx;
		overflow: hidden;
		border-width: 2rpx;
		border-style: solid;
		border-color: #ffffff;
	}

	.avatar__img {
		width: 64rpx;
		height: 64rpx;
	}

	.action-btn {
		height: 56rpx;
		padding: 0 24rpx;
		background-image: linear-gradient(45deg, #ff6b6b, #ff8e8e);
		border-radius: 28rpx;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.badge {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		min-width: 32rpx;
		height: 32rpx;
		padding: 0 8rpx;
		background-color: #ff4d4f;
		border-radius: 16rpx;
	}

	.badge-text {
		color: #ffffff;
		font-size: 20rpx;
		line-height: 32rpx;
		text-align: center;
	}

	.large-title {
		flex-direction: column;
		align-items: center;
		padding: 20rpx 0;
	}

	/* #endif */
</style>