Vant 之Tab标签页 简单应用

使用vant实现简单Tab 标签页

1)注册Tab,Tabs组件

import Vue from 'vue';
import {Tab,Tabs} from 'vant';
Vue.use(Tab);
Vue.use(Tabs);

2)使用Tab结构

<van-tabs v-model="active" sticky animated swipeable>
    <van-tab title="标签 1">
        <p v-for="item in 100" :key="item">
                内容 1
        </p>      
        </van-tab>
        <van-tab title="标签 2">内容 2</van-tab>
        <van-tab title="标签 3">内容 3</van-tab>
         <van-tab title="标签 4">内容 4</van-tab>
</van-tabs>
<script>
    export default{
        data(){
            return{
                active:2
            }
        }
    }
</script>

3)最终效果图

总结

1.tab,tabs组件中其中用了三个属性

1>sticky  具有固定功能，下拉时tab组件顶部自动固定。是否使用粘性定位布局
2>animated 是否开启切换标签内容时的转场动画
3>swipeable 是否开启手势滑动切换

[vue使用vant的van-tabs+tag在选项卡展示该内容有几条的提示]

1.直接写用v-if判断下标展示，会滚动。pass！

2.定位，各种定位，相对各种父元素各种定位，还是会滚，因为tab内容一定滚动，pass

3.手写选项卡+v-if判断，这肯定可行，但本着能用ui组件绝不手写代码的原则，pass!

4.插槽试试，没用过slot，但‘自定义标签’有这个template写法，改了改，可行。

<van-tabs v-if="activeAll==1" v-model="bactive" sticky 
      <van-tab v-for="(item,index) in list" :key="index">
        //在下标为3的tab标题上展示这个tag（信息的个数或者提示）
         <template #title> {{item}}<van-tag v-if="(index==3)" class="tipsNum" round type="danger" sixe='medium'>{{tipsNum}}</van-tag></template>
         <BIntime v-show="index==0"></BIntime>
         <BResult v-show="index==1"></BResult>
         <BProgress v-show="index==2"></BProgress>
         <BFocus v-show="index==3"></BFocus>
      </van-tab>
    </van-tabs>
data(){
      return{
        list:['即时','赛果','赛程','关注'],
        bactive:0,
        tipsNum:0
      }
    },

Tab标签页 ellipsis、border属性的开关

<template>
 <div>
  <van-tabs v-model="active" 
   @click="tabHandler"
   :ellipsis="false"
   :border="false"
   >
   <van-tab v-for="(tabname,idx) in tabList" :key="idx" :title="tabname"></van-tab>
  </van-tabs>
  <van-button @click="toDetailHandler">去详情页</van-button>
 </div>
</template>
<script>
export default{
 data(){
  return{
   active: Number(localStorage.getItem("activeIdx"))?Number(localStorage.getItem("activeIdx")):0,
   tabList:["111111","2222222","3333333","44444444","55555","666666","7777777","88888","999999999"],
  }
 },
 methods:{
  // tab点击事件
  tabHandler(idx){
   this.active = idx;
   localStorage.setItem("activeIdx",idx) // 将选中的tab缓存起来
  },
  // 去详情页
  toDetailHandler(){
   this.$router.push("/tab1")
  }
 }
}
</script>