快捷導(dǎo)航

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

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

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

話不多說(shuō)，先看下問(wèn)題描述：

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

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

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

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

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

【代碼放入項(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">去詳情頁(yè)</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緩存起來(lái)
  },
  // 去詳情頁(yè)
  toDetailHandler(){
   this.$router.push('/tab1')
  }
 }
}
</script>

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

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

說(shuō)到粘性布局，我們最常見(jiàn)的就算在app tab選項(xiàng)卡隨頁(yè)面滾動(dòng)到頂部后懸停在那，看效果

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

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

1.父元素高度沒(méi)子元素高，通常為父元素設(shè)置height:100%;

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

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

解決好失效問(wèn)題后，我們?cè)倏磛an-sticky的其中一個(gè)懸停的時(shí)候距離頂部的距離offset-top

offset-top單位為px,在pc端沒(méi)問(wèn)題，但在移動(dòng)端就有問(wèn)題了，比如你設(shè)計(jì)稿距離頂部的距離為90px,如果你直接offset-top=90，那么在手機(jī)上就會(huì)距離很遠(yuǎn)，

用window.devicePixelRatio獲取設(shè)備的像素，然后再進(jìn)行換算，說(shuō)實(shí)話不同手機(jī)上還是有差別，有的手機(jī)達(dá)到效果，有的沒(méi)達(dá)到

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

如果各位有其他好辦法，請(qǐng)?jiān)谙旅媪粞?，大家一起學(xué)習(xí)。

以上這篇解決vant中 tab欄遇到的坑 van-tabs就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: