vant 踩坑指南 之vant tab

vant tab 第一次渲染进入的时候 下滑块位置不一致

解决1 ：
用 v-show 就会导致第一次渲染 位置不同意 使用v-if 就不会出错了
解决2 ：
在tab 标签栏的tabs 有个重绘的方法（resize） 可以调用这个方法去解决

// home.vue
<template>
    <tab :title="['流行', '新款', '精选']" @clickIndex="getIndex" v-show="isShow"             
        ref="tab2"></tab>
</template>
 
<script>
    export default{
        data(){
            // 这里通过isShow来控制tab组件的展示和隐藏
            isShow: false
        },
        // 监听isShow的变化，来调用tabs上的resize方法
        watch: {
            isShow(val){
                this.$refs.tab2.resize()
            }
        }
    }
</script>

// tab组件
<template>
  <div>
    <van-tabs v-model="active" ref="tab">
      <van-tab>1</van-tab>
      <van-tab>2</van-tab>
      <van-tab>3</van-tab>
    </van-tabs>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
      active: 0
    }
  },
  methods: {
    
    resize () {
      // tabs上面有着resize方法，调用这个方法进行重绘，来解决下划线位置问题
      this.$refs.tab.resize()
    }
  }
  
}
</script>