快捷導(dǎo)航

解決vant中 tab欄遇到的坑 van-tabs

更新時(shí)間：2020年11月04日 11:48:22 作者：檸檬不萌只是酸i

這篇文章主要介紹了解決vant中 tab欄遇到的坑 van-tabs，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

話不多說，先看下問題描述：

我的需求：（和頭條的tab欄類似，單擊查看頭條tab欄）

點(diǎn)擊tab欄，下方展示出來當(dāng)前tab欄下的內(nèi)容列表（A頁面），點(diǎn)擊列表進(jìn)入詳情內(nèi)容（B頁面），但是返回（A頁面）的時(shí)候，需要顯示剛才被點(diǎn)擊的tab欄高亮顯示。（如果tab欄橫向有滾動(dòng)條，那也得讓被選中的高亮顯示）。

所以，大部分人的解決辦法就是將當(dāng)前選中的tab的索引緩存起來，等回到該頁面的時(shí)候，讓被緩存的那個(gè)高亮顯示出來。

坑的問題在于：van-tabs，里面的v-model默認(rèn)值是0，但是類型卻寫著 number | string 。

但是，在此時(shí)用緩存賦值給 v-model = " active " 的時(shí)候，active的值需要是number類型，才有效，否則再怎么設(shè)置都是無效的。

【代碼放入項(xiàng)目可直接執(zhí)行】

<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點(diǎn)擊事件
  tabHandler(idx){
   this.active = idx;
   localStorage.setItem('activeIdx',idx) // 將選中的tab緩存起來
  },
  // 去詳情頁
  toDetailHandler(){
   this.$router.push('/tab1')
  }
 }
}
</script>

最終的效果圖是這樣的，和頭條的tab欄的效果是一樣的。點(diǎn)擊查看頭條tab效果