总结tab栏切换实现的方法，以及增加滚动实现tab栏切换的效果

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动详情 ​

目录

前言

第一部分 高亮效果

效果图

 代码

第二个部分

scroll-view + swiper

---

前言

继昨天写了篇简单的tab栏切换，后来，我又想起，其实这个tab栏切换，可以换为两部分，第一部分就是上面的 鼠标的高亮效果，第二部分就是 在第一部分的基础上进行操作的，第二部分也算是写死不动的 

第一部分 高亮效果

效果图

​编辑

 代码

<view class="navTitle" v-for="(item,index) in navList" :key="index">
        <view :class="{'active':current === index}" @click="checked(index)">
          {{item.title}}
        </view>
      </view>


data里
 return {
        current: 0,
        navList: [{
          index: 0,
          title: '进行中'
        }, {
          index: 1,
          title: "未支付"
        }, {
          index: 2,
          title: "已完成"
        }]
      }

  methods: {
      checked(index) {
        this.current = index
      },
    }

第二个部分

就是判断当它点击的下标为哪个，就显示哪个里面的内容

 <view class="nav_item" v-if="current==0">
      0
    </view>
    <view class="nav_item" v-if="current==1">
      1
    </view>
    <view class="nav_item" v-if="current==2">
      2
    </view>

但我今天就想分享下，tab栏是以滚动的方式（数据多的时候使用） 实现切换的

其实也很简单

就是在 实现高亮效果的外面加一层 scroll-view 就OK了

上面都说了，第二部分是通用的，那代码 我想 就不需要 我展示吧

 <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
      <view class="scroll-view-item_H" v-for="(tab,index) in tabBars" :key="tab.id"             
   :id="tab.id"
        :class="navIndex==index ? 'activite' : ''" 
    @click="checked(index)">{{tab.name}}</view>
   
 </scroll-view>


别忘了 定义 navList 这里面要有很多数据才行


methods: {
    
    checked(index) {
        this.current = index
      },
    scroll(e) {
        console.log(e)
        this.old.scrollTop = e.detail.scrollTop
      },

 }

<style scoped>
  .activite {
    color: #ff0000;
  }

  .content {
    height: 300px;
  }

  .scroll-view_H {
    white-space: nowrap;
    width: 100%;
    color: #000000;
  }

  .scroll-view-item_H {
    display: inline-block;
    width: 20%;
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
    padding: 10px 0;
  }
</style>

效果图

​

编辑

​

编辑

 取消滚动后的效果

​

编辑

 还有一种

scroll-view + swiper

<template>
  <view>
    <!--顶部导航栏-->
    <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
      <view class="scroll-view-item_H" v-for="(tab,index) in tabBars" :key="tab.id" :id="tab.id"
        :class="navIndex==index ? 'activite' : ''" @tap="checkIndex(index)">
        {{tab.name}}
      </view>
    </scroll-view>

    <!-- 内容 -->
    <swiper :current="navIndex" @change="tabChange" class="content">
      <swiper-item class="swiper_item ">
        1
      </swiper-item>
      <swiper-item class="swiper_item ">
        2
      </swiper-item>
      <swiper-item class="swiper_item ">
        3
      </swiper-item>
      <swiper-item class="swiper_item ">
        4
      </swiper-item>
      <swiper-item class="swiper_item ">
        5
      </swiper-item>

    </swiper>

  </view>
</template>



这个需要在 data return里 定义 old: {
          scrollTop: 0
        }

    methods: {
      checkIndex(index) {
        this.navIndex = index;
        console.log(index)
      },
      scroll(e) {
        console.log(e)
        this.old.scrollTop = e.detail.scrollTop
      },
      //滑动切换swiper
      tabChange(e) {
        const navIndex = e.detail.current
        this.navIndex = navIndex
      },
    }
  }
</script>

<style scoped>
  .activite {
    color: #04c9c3;
  }

  .content {
    height: 700px;
    background-color: #04C9C3;
    color: #fff;
  }

  .scroll-view_H {
    white-space: nowrap;
    width: 100%;
    color: #CCCCCC;
  }

  .scroll-view-item_H {
    display: inline-block;
    width: 20%;
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
    padding: 10px 0;
    font-size: 32rpx;
  }
</style>

​