lcoco/pages/wallet/model/wallet-nav.vue

<template>
	<view class="nav-box box-sizing-border" :style="[{ 'margin-top': statusBarH + 'px'}]">
		<uni-icons type="back" size="24" color="#333" @click="to(1)"></uni-icons>
		<view class="nav-view-box sys-radius-200">
			<view class="nav-view  box-sizing-border">
				<view class="sys-size-32 view-box" 
				v-for="(item,i) in list" :key="i"
				@click="to(2,item)"
				:class="navType === item.id?'sys-color-black-3':'sys-color-white'">
					{{item.name}}
				</view>
				<view class="view-box-po sys-background-gray-f sys-radius-200 sys-color-black-3" 
				:class="navType===1?'v-1':'v-2'">{{name}}</view>
			</view>
		</view>
		<view class="sys-color-black sys-size-28 sys-weight-600" @click="to(3)">账单</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				statusBarH:0,
				navType:1,
				name:'充值',
				list:[{name:'充值',id:1},{name:'收益',id:2}],
			}
		},
		created() {
		  uni.getSystemInfo({
		    success: (e) =>{
		      this.statusBarH = e.statusBarHeight;
		    }
		  })
		},
		methods:{
			to(type,item){
				if(type === 1){
					uni.navigateBack({
						delta:1
					})
				}else if(type === 2){
					this.navType = item.id;
					this.name = item.name;
					this.$emit('setNavType',this.navType);
				}else{
					uni.navigateTo({
						url:'/pages/wallet/bill'
					})
				}
			},
		},
	}
</script>

<style scoped lang="scss">
	.nav-box{
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: transparent;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 24rpx;
		height: 94rpx;
		z-index: 100;
		.nav-view-box{
			background: rgba(0,0,0,0.5);
		}
		.nav-view{
			width: 248rpx;
			height: 64rpx;
			padding: 4rpx;
			display: flex;
			position: relative;
			.view-box{
				flex: 1;
				text-align: center;
				line-height: 50rpx;
			}
			.view-box-po{
				position: absolute;
				width: 120rpx;
				height: 56rpx;
				line-height: 50rpx;
				text-align: center;
				top: 4rpx;
			}
			.v-1{
				left: 4rpx;
				transition: all 0.5s; 
			}
			.v-2{
				left: 124rpx;
				transition: all 0.5s; 
			}
		}
	}
</style>