uni-app 导航栏标签页切换

 

uni-app 导航栏标签页切换

<template>
 <view>
  <view class="tab_nav">
   <view class="navTitle" v-for="(item,index) in navList" :key="index" >
    <view :class="{'active':isActive === index}" @click="checked(index)">
     {{item.title}}
    </view>
   </view>
  </view>
  <view class="nav_item" v-if="isActive==0">0</view>
  <view class="nav_item" v-if="isActive==1">1</view>
  <view class="nav_item" v-if="isActive==2">2</view>
 </view>
</template>

<script>
 export default {
   data() {
    return {
     isActive: 0,
     navList:[
      {
       index: 0,
       title: '标题一'
      },{
       index: 1,
       title: "标题二"
      },{
       index: 2,
       title: "标题三"
      }
     ]
    }
   },
   methods: {
    checked(index) {
     this.isActive = index
    },
   }
  }
</script>

<style>
 .tab_nav{
  display: flex;
  justify-content: center;
  align-items: center;
 }
 .tab_nav  .navTitle {
  height: 90rpx;
  line-height: 90rpx;
  width: 100%;
  text-align: center;
  font-size: 32rpx;
  font-family: Alibaba PuHuiTi;
  color: #333;
 }
 .active {
  position: relative;
  color: #333;
 }
 .active::after {
  content: "";
  position: absolute;
  width: 100rpx;
  height: 8rpx;
  background-color:  #FFC125;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
 }
</style>