不规则tab切换

最新推荐文章于 2024-07-19 17:17:26 发布

az44yao

最新推荐文章于 2024-07-19 17:17:26 发布

阅读量210

点赞数

文章标签：大数据 javascript

本文链接：https://blog.csdn.net/az44yao/article/details/125436283

版权

<template>
	
		<div class="nav_wrapper">
			<div @tap="changeNav(index)" v-for="(item,index) in navList" :key="index" class="nav_item"
				:class="{'active':index==currentNav}">
				<span v-text="item"></span>
				<img v-if="index==currentNav" class="nav_icon nav_icon_r" src="../static/page_tab01@2x.png">
				<img v-if="index>currentNav" class="nav_icon nav_icon_r nav_icon_base"
					src="../static/page_tab03@2x.png">
				<img v-if="index==currentNav" class="nav_icon nav_icon_l" src="../static/page_tab02@2x.png">
				<img v-if="index<currentNav" class="nav_icon nav_icon_l nav_icon_base"
					src="../static/page_tab04@2x.png">
			</div>
		</div>

	
</template>

<script>
	export default {
		data() {
			return {
				// 当前菜单栏
					currentNav: 0,
					// 菜单栏
					navList: ['未使用', '已使用', '过期'],
			}
		},
		methods: {
			// 切换菜单栏
				changeNav(index) {
					if (this.currentNav != index) {
						this.currentNav = index
					}
				},
		}
	}
</script>

<style>
.nav_wrapper {
  top: 0.88rem;
  height: 0.96rem;
  width: 100%;
  display: flex;
  align-items: flex-end;
  position: fixed;
  left: 0;
  z-index: 99;
}
.nav_wrapper .nav_item {
  font-size: 0.24rem;
  height: 0.96rem;
  flex: 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #c0e3f5;
  font-family: Source Han Sans SC;
  font-weight: 300;
  color: #295880;
  border-radius: 0.08rem 0.08rem 0 0;
  position: relative;
}
.nav_wrapper .nav_item.active {
  font-size: 0.26rem;
  height: 1.04rem;
  background-color: #fff;
  font-family: Source Han Sans SC;
  font-weight: bold;
  color: #3A7EB7;
}
.nav_wrapper .nav_item .nav_icon {
  width: 1.04rem;
  height: 1.04rem;
  position: absolute;
  top: 0;
  z-index: 10;
}
.nav_wrapper .nav_item .nav_icon_base {
  width: 1.44rem;
  height: 0.96rem;
  z-index: 9;
}
.nav_wrapper .nav_item .nav_icon_l {
  left: -0.92rem;
}
.nav_wrapper .nav_item .nav_icon_l.nav_icon_base {
  left: -1.08rem;
}
.nav_wrapper .nav_item .nav_icon_r {
  right: -0.92rem;
}
.nav_wrapper .nav_item .nav_icon_r.nav_icon_base {
  right: -1.08rem;
}

</style>

page_tab01@2x