vant中tab贴切业务使用

1.取消下划线

// 取消下划线
.van-tabs__line {
  background-color: transparent;
}

2.设置某个便签为自定义色

     <!-- title-class自定义类名 -->
      <van-tab title-class="screen">
        <template #title>筛选 </template>
        筛选
      </van-tab>
      <style lang="less">
       // 自定义筛选的颜色
       .screen {
           color: red;
       }
</style>

3.自定义选中时

// 选中时颜色
.van-tab--active {
  color: royalblue;
}

4.标签加入图片

 <van-tab title-class="screen">
        <template #title>
          <div class="flex_">
            <div>
              <img src="https://img01.yzcdn.cn/vant/apple-1.jpg" alt="" />
            </div>
            <div>筛选</div>
          </div>
        </template>
        筛选
      </van-tab>
   // 自定义类名
.screen {
  color: red;
  .flex_ {
    display: flex;
    align-items: center;
  }
  img {
    width: 26px;
    height: 26px;
  }
}

5.tab嵌套list,及所有代码

<template>
  <div>
    <van-tabs v-model="active">
      <van-tab :title="item" v-for="(item, index) in list" :key="index"
        >内容{{ index }}</van-tab
      >
      <!-- title-class自定义类名 -->
      <van-tab title-class="screen">
        <template #title>
          <div class="flex_">
            <div>
              <img src="https://img01.yzcdn.cn/vant/apple-1.jpg" alt="" />
            </div>
            <div>筛选</div>
          </div>
        </template>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell v-for="item in listNum" :key="item" :title="item" />
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 2, //选择的哪一个标签
      //   以下模拟标签数据
      list: ["全部", "待确定", "已同意", "已拒绝", "已取消"],
      listNum: [],
      loading: false,
      finished: false,
    };
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.listNum.push(this.listNum.length + 1);
        }
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.listNum.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
  },
};
</script>

<style lang="less">
// 取消下划线
.van-tabs__line {
  background-color: transparent;
}
// 自定义类名
.screen {
  color: red;
  .flex_ {
    display: flex;
    align-items: center;
  }
  img {
    width: 26px;
    height: 26px;
  }
}
// 选中时颜色
.van-tab--active {
  color: royalblue;
}
</style>