vant中van-tabs如何避免tab栏布局问题?

2026-04-02 10:110阅读0评论SEO问题
  • 内容介绍
  • 文章标签
  • 相关推荐

本文共计881个文字,预计阅读时间需要4分钟。

vant中van-tabs如何避免tab栏布局问题?

“话不多说,先看下问题描述:

我的需求:(与头部条目的tab栏类似,单点击查看头部tab项)+ 点击tab栏,下方展示出当前tab项下的内容列表(A页面),点击列表项进入详情内容(B页面)。

话不多说,先看下问题描述:

我的需求:(和头条的tab栏类似 ,单击查看头条tab栏)

点击tab栏,下方展示出来当前tab栏下的内容列表(A页面),点击列表进入详情内容(B页面),但是返回(A页面)的时候,需要显示刚才被点击的tab栏高亮显示。(如果tab栏横向有滚动条,那也得让被选中的高亮显示)。

所以,大部分人的解决办法就是将当前选中的tab的索引缓存起来,等回到该页面的时候,让被缓存的那个高亮显示出来。

坑的问题在于:van-tabs,里面的v-model默认值是0,但是类型却写着 number | string 。

但是,在此时用缓存赋值给 v-model = " active " 的时候,active的值需要是number类型,才有效,否则再怎么设置都是无效的。

阅读全文
标签:vantab

本文共计881个文字,预计阅读时间需要4分钟。

vant中van-tabs如何避免tab栏布局问题?

“话不多说,先看下问题描述:

我的需求:(与头部条目的tab栏类似,单点击查看头部tab项)+ 点击tab栏,下方展示出当前tab项下的内容列表(A页面),点击列表项进入详情内容(B页面)。

话不多说,先看下问题描述:

我的需求:(和头条的tab栏类似 ,单击查看头条tab栏)

点击tab栏,下方展示出来当前tab栏下的内容列表(A页面),点击列表进入详情内容(B页面),但是返回(A页面)的时候,需要显示刚才被点击的tab栏高亮显示。(如果tab栏横向有滚动条,那也得让被选中的高亮显示)。

所以,大部分人的解决办法就是将当前选中的tab的索引缓存起来,等回到该页面的时候,让被缓存的那个高亮显示出来。

坑的问题在于:van-tabs,里面的v-model默认值是0,但是类型却写着 number | string 。

但是,在此时用缓存赋值给 v-model = " active " 的时候,active的值需要是number类型,才有效,否则再怎么设置都是无效的。

阅读全文
标签:vantab