vantの中でtabバーの出会う坑van-tabsを解決します。

3323 ワード

vant タb van-tabs

話を多くしないで、まず問題の説明を見ます。
私の需要：（トップバーのtab欄と似ています。トップバーをクリックして表示します。）
タブバーをクリックすると、現在のタブバーの下にあるコンテンツリスト（Aページ）が下に表示されます。リストをクリックして詳細内容（Bページ）に入りますが、（Aページ）に戻るときは、先ほどクリックされたタブバーを表示して強調表示する必要があります。タブバーの横にスクロールバーがある場合は、選択されたハイライトを表示させます。
したがって、ほとんどの人の解決方法は、現在選択されているtabのインデックスをキャッシュし、このページに戻ると、キャッシュされているハイライトを表示させることです。
坑の問題はvan-tabsで、中のv-modelのデフォルト値は0ですが、タイプはnumber stringと書いています。

ただし、この時にキャッシュでv-model=「active」を付与する場合、activeの値はnumberタイプである必要があり、有効でなければ、いくら設定しても無効です。
【コードをプロジェクトに入れて直接実行できる】


<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>

最終的な効果図はこのようなもので、前条のtabバーの効果と同じです。クリックしてトップバーの効果を調べます。

知識を補充します：vue移動端のフレームワークvan-sticky粘性の配置、原理と故障の原因と注意点を実現します。
スティッキーレイアウトといえば、私たちが最もよく使うのはapp tabタブでもページに沿ってトップにスクロールしてからそこに止まっています。効果を見てください。

この効果を実現するために、最も簡単な方法はcssスタイルにpositionを追加することです。stickyは簡単で、jsでページをモニターしてスクロールするよりも、一定の高さに達したスタイルがfixedになり、簡単で性能が良いです。
vueのvan-stickyコンポーネントが粘性を実現する原理はposition:stickyを添加することによって実現されますが、もしあなたがposition:stickyを使ったら無効になります。効果がない理由はありますか？
1.父元素の高さは子元素ほど高くなく、通常は父元素のためにheight:100%を設定します。
2:父要素はoverflow:hiddenを設置しています。overflow-x:hidden、overflow-y:hidden、またはoverflow:aut属性は全部影響します。
その中の父の元素はすべての父の元素を指して、ただ1級の父の元素だけではなくて、vueの中でもし失効するならば、ap.vueコンポーネントの中でこれらを設置したのではないかを見て忘れないでください。
失効問題を解決したら、私達はもう一度van-stickyの中の一つを見ます。
Offset-top単位はpxで、pc側では大丈夫ですが、モバイル側では問題があります。例えば、原稿を設計する距離は90 pxです。もし直接offset-top=90だったら、携帯電話から遠く離れます。
window.devicePixelRatioでデバイスのピクセルを取得してから換算します。実は携帯電話によって違いがあります。効果がある携帯もあれば、ないものもあります。
今は元素を取得したoffset Heightを使っています。例えば、this.refs.getheight.offset Heightは、テストを通じて正確に固定位置に到達します。
他にいい方法がありましたら、下にメッセージを残してください。みんなで勉強します。
以上の解决vantの中でtab栏の出会う坑van-tabsは小编がみんなにあげるすべての内容で、みんなに1つの参考をあげることができることを望んで、みんながよけいに私达を支持することをも望みます。

MySQLカスタム変数の概念と特徴

vueに基づいてマイクロブログの三者登録プロセスの解析を実現します。