uniapp自定义导航栏

<template>
	<view>
		<uni-nav-bar left-icon="left" @clickLeft="back">
			<view class="titlenav" @click="onchange">
				<text class="tit_a">{{titles}}</text>
				<uni-icons type="bottom" size="15" v-if="jiantou"></uni-icons>
				<uni-icons type="top" size="15" v-if="onshow"></uni-icons>
			</view>
		</uni-nav-bar>
		<view class="header" v-if="onshows">
			<view v-for="(item,index) in title" @click="ontitle(index)" :current="current">
				{{item.name}}
			</view>
		</view>
		<!-- 列表内容 -->
		<view>
			<view class="contentnav">
				<view v-if="current === 0">
					<view>
						<view>头像</view>
						<view><img src="" ></view>
					</view>
				</view>
				<view v-if="current === 1"><text class="content-text">选项卡2的内容</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				jiantou: true,
				onshow: false,
				onshows: false,
				titles: "团员设置",
				title: [{
						value: 0,
						name: '团员设置'
					},
					{
						value: 1,
						name: '团长设置'
					}
				],
				current: 0,
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			onchange() {
				this.jiantou = !this.jiantou
				this.onshow = !this.onshow
				this.onshows = !this.onshows

			},
			ontitle(e) {
				this.titles = this.title[e].name
				this.onshows = false
				if (this.current !== e) {
					this.current = e
				}
			}

		}
	}
</script>

<style lang="scss">
	.titlenav {
		margin: 0 auto;
		margin-top: 20rpx;
		font-size: 28rpx;

		.tit_a {
			padding: 0 10rpx 0 40rpx;
		}

	}

	.header {
		text-align: center;
		position: relative;
		top: 0;
		right: 0;
		width: 100%;
		background: #d8d8d8;
	}
	.contentnav{
		position: fixed;
		top:90rpx
	}
</style>