使用vant時 tab欄中出現(xiàn) van-tabs怎么解決

本篇文章為大家展示了使用vant時 tab欄中出現(xiàn) van-tabs怎么解決，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

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

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

點擊tab欄，下方展示出來當前tab欄下的內容列表（A頁面），點擊列表進入詳情內容（B頁面），但是返回（A頁面）的時候，需要顯示剛才被點擊的tab欄高亮顯示。（如果tab欄橫向有滾動條，那也得讓被選中的高亮顯示）。

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

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

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

【代碼放入項目可直接執(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'))&#63;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>

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

補充知識：vue移動端框架van-sticky粘性布局，實現(xiàn)原理和失效原因及注意點

說到粘性布局，我們最常見的就算在app tab選項卡隨頁面滾動到頂部后懸停在那，看效果

要實現(xiàn)這個效果，最簡單的辦法就是在css樣式里添加position:sticky就可以實現(xiàn)，就這么簡單，比用js監(jiān)聽頁面滾動，然后達到一定高度樣式變?yōu)閒ixed，簡單且性能好。

vue 的van-sticky組件實現(xiàn)粘性的原理就是通過添加position:sticky實現(xiàn)的，但是如果你使用了position:sticky后失效，并沒有效果的原因有:

1.父元素高度沒子元素高，通常為父元素設置height:100%;

2:父元素設置了overflow:hidden,overflow-x:hidden,overflow-y:hidden,或者overflow:auto屬性都能影響到

其中父元素是指所有父元素，不單單是上一級父元素，在vue中如果失效了別忘了看app.vue組件里是不是設置了這些。

解決好失效問題后，我們再看van-sticky的其中一個懸停的時候距離頂部的距離offset-top

offset-top單位為px,在pc端沒問題，但在移動端就有問題了，比如你設計稿距離頂部的距離為90px,如果你直接offset-top=90，那么在手機上就會距離很遠，

用window.devicePixelRatio獲取設備的像素，然后再進行換算，說實話不同手機上還是有差別，有的手機達到效果，有的沒達到

目前我是用了獲取元素offsetHeight在賦值回去，如this.$refs.getheight.offsetHeight，經(jīng)測試能準確達到固定的位置，

上述內容就是使用vant時 tab欄中出現(xiàn) van-tabs怎么解決，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業(yè)資訊頻道。