vant tabbar路由模式无法正常显示被选中的主页标签

最新推荐文章于 2024-06-21 20:31:17 发布

LuciferLysss

最新推荐文章于 2024-06-21 20:31:17 发布

阅读量857

点赞数

分类专栏：前端学习文章标签：前端 vue.js html html5 javascript Powered by 金山文档

本文链接：https://blog.csdn.net/q173397443/article/details/129128072

版权

前端学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在使用vant组件库的tabbar时，遇到一个问题：当主页标签被选中，页面能正常切换，但标签的高亮状态未显示。问题出在将to的值设为“/”时，导致tabbar-item无法正确添加选中效果。解决方法是调整to的设置，确保在切换时能同时更新tabbar的状态，从而实现选中项的高亮显示。

摘要由CSDN通过智能技术生成

出现的问题

使用vant组件库中的tabbar时，主页标签在被选中时页面可以正常切换，但是标签栏中的图标没有显示被选中的高亮状态。

问题原因

如果将to的值设置为“/”时，页面可以正常切换，但无法将对应的tabbar-item加上选中效果。

解决方法

这样即可解决。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

LuciferLysss

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vant tabbar路由模式无法正常显示被选中的主页标签

在使用vant组件库时发现tabbar选中标签效果显示可能会出现的一个问题
复制链接

扫一扫

专栏目录

vant-image本地图片无法显示

01-07

正常情况下都是这样写的，但是vant这个框架不知道怎么想的，居然加载不出来，花里胡哨。文档也没有写怎么加载本地图片，到处挖坑。如图：加载失败解决办法： src属性绑定requeir（）方法 :src=require('../...

vant 组件van-tabbar实现底部导航

yeyazi001的博客

04-06

4314

移动端小白，首次尝试移动H5开发，使用vant2的van-tabbar实现底部导航功能。本文忽略vant使用步骤，项目中使用全局引用。由于查询很多文章有的过于复杂，有的功能未实现，所以简单整理如有问题欢迎留言改正。底部导航栏简单实现，需要注意的是，组件是需要在所有需要使用的页面进行引用。所以将底部导航栏组合起来封装成一个组件。

参与评论您还未登录，请先登录后发表或查看评论

如何使用vant配置Tabbar

jakelihua

06-11

2727

vant如何创建Tabbar,vue如何创建Tabbar

如何在微信小程序使用vant 进行自定义底部tabbar组件

最新发布

唐家小妹的博客

06-21

512

van-tabbar-item icon="home-o">首页</van-tabbar-item><van-tabbar-item icon="friends-o">我的</van-tabbar-item>active: {value: 0},methods: {case 0:});break;default:});});比如 my.wxml和home.wxml。

20.自定义tabBar(使用vant中的tabbar)

potato123232的博客

07-09

3779

自定义图标就要用这个东西首先搞wxml，我当前的index.wxml是这样的<van-tabbar-item icon="home-o">标签</van-tabbar-item><van-tabbar-item icon="search">标签</van-tabbar-item><van-tabbar-item icon="friends-o">标签</van-tabbar-item><van-tabbar-item icon="setting-o">标签</van-tabbar-item>

路由、Vant组件库

zhayuanyuan22的博客

03-03

1190

一、路由的概念前端路由：路径和组件的映射关系。路由作用：实现业务场景切换。单页面应用：所有的业务都在一个页面中编写，有一个html 单页面应用优点：整体不刷新页面，用户体验更好。数据传递容易，开发效率高单页面应用缺点：开发成本高首次加载会比较慢一点。不利于seo 单页面应用想要切换场景需要依赖路由。二、使用路由实现路由：vue-router（暂时安装3.5.1

解决vantUI底部tabbar导航与页面不对应问题(window.loaction.hash)

小绵杨

02-12

1891

目录前言解决写在最后前言有一个需求是利用vant底部的tabbr组件，搭配vueRouter，实现路由导航。需要自定义图标，并且选中后图标应该变换选中后的样式。vantui是提供了路由模式的tabbar的，但是好像不支持自定义图标。所以用了下图的方法：使用后，发现一个问题，就是如果进入二级页面，也就是不包含tabbar组件的页面，那么当前选中的tabbar项就丢失了，会变回默认的0，所以必须在离开tabbar组件所在页面的时候，记住当前选中的tabbar项或者判断当前路由，实现根据路由重新初始化ta

路由_vant组件库使用

m0_73442777的博客

07-17

311

路由是在前端开发中常用的一项技术，它用于实现页面之间的切换和导航功能。Vant组件库是一套基于Vue.js的移动端UI组件库，提供了丰富的组件和工具，可以帮助开发者快速构建优秀的移动端应用程序。在使用Vant组件库时，路由功能是必不可少的。Vant组件库与Vue Router库结合使用，可以轻松实现页面的跳转和导航。Vue Router是Vue.js官方的路由管理器，它能够根据URL的变化，动态地加载不同的组件，实现单页面应用的多页面展示效果。

H5底部tabbar模板，基于vant组件库及使用最新脚手架搭建

08-25

基于vue开发H5，使用vant的UI组件开发界面，该简单模板 1. px自动转化响应式rem单位。更容易更高效开发，像素级还原设计稿； 2. axios请求封装； 3. 使用vuex管理底部tabbars的数据，实现权限控制； 4. 下拉刷新，...

vantUI 获得piker选中值的自定义ID操作

01-21

vantUI官网：picker 官网例子 export default { data() { return { columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'] }; }, methods: { onChange(picker, value, index) { console.log('当前值'+value...

小程序使用Vant weapp的索引栏IndexBar无法正常跳转至对应锚点且底部异常

01-03

小程序使用Vant weapp的索引栏IndexBar组件无法正常跳转至对应锚点，且无变色效果，但滚动正常。 Vant UI库是采用dist文件引入的方式导入。按官方demo在xx.json引入组件 van-index-bar: ../../dist/index-bar/...

几代码实现导航栏透明渐变、实现TabBar中间凸起

11-19

然后在`tabBarController(_:didSelect:)`代理方法中更新`centralItemIndex`，以确保被选中的按钮始终处于凸起状态。 ```swift class CustomTabBarController: UITabBarController { func setCentralItemIndex...

【前端】Vue项目：旅游App-（4）TabBar：Vant库实现功能与样式

karshey的博客

01-03

1713

TabBar：Vant库实现功能与样式

解决Vant组件库tabs标签页选中状态与当前页面不匹配

qq_52161116的博客

04-26

1117

通过vue-router的$route.path获取到当前页面的路由路径，然后将路径与组件进行双向数据绑定,同时将的name属性也设置为动态的页面路径。

vant-tabbar默认选中失效问题

tianmeng.luo的博客

01-04

1838

vant-tabbar 默认选中项失效

vantUI应用（Tabbar标签页）返回上一页的失效问题

草巾冒小子的博客

10-13

2316

使用了vantUI框架的（Tabbar标签页）组件，开发了个页脚固定导航：我的操作说明：登录页 /login 登录成功后，进入首页 / 然后选择首页页脚导航，个人中心 /personal 发现在点击个人中心返回按钮的时候，直接返回到了登录页，为什么呢？原因分析 · （源码分析）：经过项目对应文件的源代码查看（导航组件【代码如下】）和 vantUI组件的官方解说，原来是因为使用了关键词：replace （是否在跳转时替换当前页面历史），导致页面的历史路由记录被替换了。所以浏览器点击返

vue3+vite+ts+router+vant4(从零到入门)

ICUiseeyou的博客

12-15

3259

vue3 vite vant router ts

vant 页面切换后，tabbar的样式和当前页面不符合

Bitter的博客

10-27

1087

mounted () { const navBarActive = window.location.hash if (navBarActive.includes('#/layout/healthservices')) { this.active = '健康服务' } else if (navBarActive.includes('#/layout/home')) { this.active = '首页' } else if (navBarActi...

vant框架（引入组件，编程式导航，嵌套路由，）

谢谢你的关注

07-21

2347

vant框架（引入组件，编程式导航，嵌套路由，）

vant tabbar

08-30

Vant Tabbar 是一个基于 Vant UI 框架的选项卡组件，用于在移动端创建底部导航栏。它允许你在页面底部放置多个标签按钮，并且可以通过切换标签来切换页面内容。使用 Vant Tabbar 可以方便地实现类似微信底部导航栏的效果。你可以通过以下步骤来使用 Vant Tabbar： 1. 安装 Vant UI：首先确保你的项目已经安装了 Vant UI，可以通过 npm 或 yarn 进行安装。 ```shell npm install vant ``` 2. 导入 Tabbar 组件：在需要使用 Tabbar 的页面中，导入 Tabbar 组件并注册。 ```javascript import { Tabbar, TabbarItem } from 'vant'; export default { components: { [Tabbar.name]: Tabbar, [TabbarItem.name]: TabbarItem, }, }; ``` 3. 使用 Tabbar 组件：在模板中使用 Tabbar 组件，并设置相应的属性和事件。 ```html <template> <div> <tabbar v-model="activeTab"> <tabbar-item icon="home-o" to="/home">首页</tabbar-item> <tabbar-item icon="search" to="/search">搜索</tabbar-item> <tabbar-item icon="shopping-cart-o" to="/cart">购物车</tabbar-item> <tabbar-item icon="user-o" to="/profile">我的</tabbar-item> </tabbar> </div> </template> ``` 在上面的示例中，`v-model` 绑定了当前选中的标签按钮的索引，`to` 属性指定了每个标签按钮对应的路由路径。 4. 处理 Tabbar 切换事件：通过监听 `activeTab` 的变化，可以在页面中处理标签切换的逻辑。 ```javascript export default { data() { return { activeTab: 0, }; }, watch: { activeTab(index) { // 处理标签切换逻辑 }, }, }; ``` 通过以上步骤，你就可以在你的移动端应用中使用 Vant Tabbar 组件来创建底部导航栏了。希望这能帮到你！如果还有其他问题，请随时提问。