<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>