关于vant 的tabbar功能

这篇具有很好参考价值的文章主要介绍了关于vant 的tabbar功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、想要实现tabbar页面A,其他的页面B(非tabbar页面)。

从A页面进入B页面,底部的active选中效果应该被取消掉,但是还是选中A。
按照官网的说法有两个方法

一、根据path路径
vant tabbar默认选中并加载页面,前端,tabbar,vant,vue.js

二、自定义的modelvant tabbar默认选中并加载页面,前端,tabbar,vant,vue.js

但是!但是! 但是!

path路径设置时 如下,‘ / ’ 默认路径也是home页面,就会导致刚进入页面不能直接选中/home 首页的高亮显示。如果将 to=' home'改为 to = ' / ' ,那么在点击tabbar时,就会无法再次选中首页高亮。

vant tabbar默认选中并加载页面,前端,tabbar,vant,vue.js

如果用的是v-mode=" active ",那从首页进入其他B页面(非tabbar)页面  高亮显示应该给取消掉,但是还会选中之前的home页面,从而达不到预期,所以出现麻烦事了,试了各种方法都没有达到预期,没有达到效果。
三、使用tabbar的页面单独引入

 <allTabbar :active="0" />

这样才能达到想要的效果,初始化时无论从哪个页面进入都有选中效果,如果是非tabbar页面则不选中,如果是 ‘ / ’或者 ’ /home‘ 是也能选中首页高亮。

但是!但是! 但是!
总是觉得第三种方法有点不好用,代码反而啰嗦了。

各位弟兄姊妹们,还有其他好用的方法吗?期待。。。。。。文章来源地址https://www.toymoban.com/news/detail-760970.html

到了这里,关于关于vant 的tabbar功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3 element plus table selection展示数据,默认选中功能

    当打开表格数据时,可能会根据后台返回的数据,默认选中符合条件的行 这样我们就用到了el-table-column,设 type 属性为 selection 1.表格的第一行,设置为: 2.table上定义ref属性,并且定义这个变量 3.在事件中配置一下 //修改选中的行,重新赋值 //结果 注意:支持树形结构

    2024年02月11日
    浏览(49)
  • uni-app的tabBar用法(自动、点击刷新页面,loading加载框)

    一.先在package.json中配置tabBar(前置条件) tabBar所跳转的页面应事先在page中创建好!如下配置后app下方会有可点击的tabBar按钮,在list中设置按钮的个数。  图1         tabBar的 list 属性         text :tabBar按钮的名称         pagePath :tabBar按钮的page页面路径         iconPa

    2024年02月08日
    浏览(51)
  • uni-app前端H5页面底部内容被tabbar遮挡

    在用uniapp写小程序的时候,底部有一部分内容没显示出来,被底部的tabbar遮挡住了 给最外部的view设置样式 padding-bottom: var(--window-bottom) ,如下 参考1 参考2 使用 uni-app 框架开发的一个项目,发现 H5 端页面底部的内容被导航栏(Tabbar)遮挡,小程序端可以正常显示。 查阅资料

    2024年02月04日
    浏览(65)
  • EL-UI树形表格页面首次加载-默认收起

    问题描述:在vue中使用element的树形表格时,想要在页面初始化时就默认收起树形表格下拉,但是实际开发过程中在表格中设置 default-expand-all 属性之后表格并不起效果,也就是页面初始化之后树形列表仍旧都是展开的,这就很不合理;如果数据较少的话还可以接受,但是如果

    2024年01月23日
    浏览(39)
  • 鸿蒙 ArkTS Tabs组件实现类微信(可滑动的)tabBar页签切换页面功能

    :harmonyOS   鸿蒙开发  ArkTS  TabContent 使用场景:类微信底部导航栏,点击/左右滑动切换页面并加载数据 开发环境:ArkTS3.1  API9  Phone设备 HMOS Dev官方文档:文档中心 演示效果: 目录 完整Demo已提交至Gitee 搭建页面 自定义TabContent(往后翻有完整代码) 思路 开始 完

    2024年02月04日
    浏览(60)
  • HarmonyOS ArkTS TabContent组件实现类微信(可滑动的)tabBar页签切换页面功能

    :harmonyOS   鸿蒙开发  ArkTS  TabContent 使用场景:类微信底部导航栏,点击/左右滑动切换页面并加载数据 开发环境:ArkTS3.1  API9  Phone设备 HMOS Dev官方文档:文档中心 演示效果: 目录 完整Demo已提交至Gitee 搭建页面 自定义TabContent(往后翻有完整代码) 思路 开始 完

    2024年02月05日
    浏览(55)
  • Tabbar切换效果(vant)

    route 是否开启路由模式

    2024年01月17日
    浏览(29)
  • Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本(登录注册页面,验证码)

    系列内容 参考链接 基于 Vue3.x + Vant UI 的多功能记账本(一) 项目演示,涉及知识点 基于 Vue3.x + Vant UI 的多功能记账本(二) 搭建开发环境 基于 Vue3.x + Vant UI 的多功能记账本(三) 开发导航栏及公共部分 项目演示 Vue3 + Vant UI_多功能记账本 1、登录注册页面 页面设计,页面

    2024年02月03日
    浏览(76)
  • 如何使用vant配置Tabbar

    本文讲解如何通过vant配置Tabber功能。 首先肯定是通过vant官网找到Tabber 然后我们创建一个components文件夹,再到里面创建一个common文件夹,然后创建TabbarView.vue组件 内容具体如下: 代码详细解释: 需要搭配router下面的index.js使用 HTML 部分 JavaScript 部分 整个代码部分使用了 V

    2024年01月16日
    浏览(64)
  • vant tabbar遮挡内容的解决方式

    前面我们提到,使用vant-tabbar 来替换原生的tabbar,但是实际使用中发现,当tab页内容过多之后,tabbar会遮挡页面最下方的内容 直接上图: 我们会发现,两个按钮消失了,从 2 处可以看到,屏幕右侧的 scroll 越过了 tabbar 一栏,说明内容是被遮挡住了,确实滑到了底部但是看不

    2024年02月09日
    浏览(31)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包