避坑17_Vant-Tabbar点击两次样式才能切换

最新推荐文章于 2024-06-07 18:32:46 发布
最新推荐文章于 2024-06-07 18:32:46 发布
阅读量1.3k 收藏 4
点赞数 2
分类专栏： 走过的坑 文章标签： Vant
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linxwx/article/details/127717037
版权
一、问题：

使用Vue2 + Vant2开发移动端网站时，使用了Vant-Tabbar组件。但是在切换时，点击其他页面正常，点击主页无法生效，且active样式必须点击两次才能出现，非常奇怪：
在这里插入图片描述

官网使用如下：
Van2 - Tabbar标签栏

二、原因及解决方法

我的底部导航条命名为：BottomBar，应该将其放在<router-view></router-view>外面
原本我是在每个View页面中都重复使用了BottomBar，现在只需用在统一的父组件中即可，我是用在App.vue中
在这里插入图片描述

ParadoxLin
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Vant-Aliapp：支付宝小程序版本Vant组件库
02-26
Vant Aliapp是移动端Vue组件库的支付宝小程序版本，两者基于相同的视觉规范，提供一致的API接口，助力开发者快速构建小程序应用。 Vant Aliapp通过小程序转换器基于转换得到，并进行了少量的兼容适配调整。 预览 ...
flutter_vant_kit:Vant风格的Flutter UI库
05-17
Flutter Vant Kit Flutter Vant Kit is a style flutter UI library. Introduction How to use dependencies: flutter_vant_kit: ^0.2.7 How to run demo cd example/ flutter run API View 或 【|】 Demo ...
vant + vue2 使用Tabbar点击两次才出现高亮显示问题（已解决）
m0_64897686的博客
11-21 334
这是我的tabbar组件，可以引入全局使用，也可以引入部分组件使用，我都测试过没有问题，只需要在tabbar组件的生命周期函数created或者mounted函数里面写个判断就ok了。自己第一次做m端页面，用到vant的Tabbar时遇到该问题，看了很多网上的解决方法都没解决，自己搞了一下解决了。原理就是通过路由路径更改v-model绑定的active的值。
解决tabbar点击两次图标才正常对应的问题
小香菜子的博客
05-15 477
（2）index页面。
解决Uni-app自定义底部tabber，切换tabbar时，点击两次tabbar才会显示正确，但页面可以正常切换的问题
最新发布
qq_39210364的博客
06-07 824
底部tabbar
vant 组件van-tabbar实现底部导航
yeyazi001的博客
04-06 4133
移动端小白，首次尝试移动H5开发，使用vant2的van-tabbar实现底部导航功能。本文忽略vant使用步骤，项目中使用全局引用。由于查询很多文章有的过于复杂，有的功能未实现，所以简单整理如有问题欢迎留言改正。底部导航栏简单实现，需要注意的是，组件是需要在所有需要使用的页面进行引用。所以将底部导航栏组合起来封装成一个组件。
如何使用vant配置Tabbar
jakelihua
06-11 2538
vant如何创建Tabbar,vue如何创建Tabbar
原生微信小程序使用vant的tabbar（解决点击俩次图标才正确切换）
weixin_62639453的博客
03-25 4708
一、声明：在导入使用vant （tabbar）组件的时候，发现通过点击切换的方法来更改active的方法，会出现图标没用及时对应上，需要第二次点击才对应上的问题。在每一个页面使用tabbar自定义组件的地方，在onshow生命周期函数里初始active的值，用来对应每个页面切换之后展示对应的图标。6.与pages同名创建custom-tab-bar文件夹（名字不能变），并创建index组件（tabbar自定义组件）假如，我采用index页面作为一个tabbar页，对应的active可以这么更改其选中态。
20.自定义tabBar(使用vant中的tabbar)
potato123232的博客
07-09 3635
自定义图标就要用这个东西首先搞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>
微信小程序--》tabBar底部栏
ztK63LrD的博客
08-18 7502
tabBar底部栏的讲解
vant-weapp_primitivezmf_vant-weapparea
09-29
【 vant-weapp_primitivezmf_vant-weapparea 】是一个基于微信小程序的开源项目，用于实现图书馆座位预约功能。这个项目结合了 vant-weapp UI 库和 primitivezmf 框架，为用户提供了一个简洁、易用的界面，使得图书...
vant-weapp_primitivezmf_vant-weapparea_图书馆座位预约_微信预约_微信小程序
09-11
这个应用名为“vant-weapp_primitivezmf_vant-weapparea_图书馆座位预约_微信预约_微信小程序”，从其标题我们可以提取出几个关键的技术点和功能特性。 首先，“vant-weapp”是一个重要的关键字，它表明此项目采用...
vant-weapp_primitivezmf_vant-weapparea_图书馆座位预约_微信预约_微信小程序_源码.zip
10-05
《 vant-weapp：微信小程序实现图书馆座位预约系统详解》 在现代信息技术的推动下，图书馆管理方式也逐渐向数字化、智能化转变。其中，微信小程序作为轻量级的应用平台，为图书馆提供了一种便捷的座位预约服务。本...
van-tabbar跳转当前页带修改参数带route当前页所有参数
ss_Tina的博客
11-17 1666
vue，使用van-tabbar样例小记，van-tabbar跳转当前页，vue-route获取页面所有参数跳转带参。
vant底部导航点击两次才能更换样式的问题
fanlao4203的博客
08-27 2950
最近项目中遇到的底部导航栏在组件必须点两下才可以更换样式的问题，贴出来分享一下。 项目使用vantui的底部导航 建一个footer.vue <template> <van-tabbar v-model="active" active-color="#07c160" inactive-color="#999"> <van-tabbar-item to="/"> <span>首页</span> <i.
微信小程序使用van组件Tabbar 标签栏
小香菜子的博客
05-15 1593
开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。（8）按需引入，在对应的page页面的 .json文件中的usingComponents属性中通过路径找到@vant引入你想使用的组件。（2）与pages同名创建custom-tab-bar文件夹（名字不能变），并创建index组件（tabbar自定义组件）（1）打开我们小程序的项目目录，然后打开文件所在的位置。（5）修改 app.json。
vant-tabbar 重复点击才能生效的问题
qq_49294271的博客
05-15 479
可以看到官方给出的event.detail的值是两部分 一个数字的标签和一个组合，可以完成页面的切换，再次点击才会有我们想要的标签，才能让图标发亮。第二三行是detail.name 标签的name，但并没有这个东西，这也是这个做法不合理的地方，用一行有问题的代码和原来有问题的代码来解决问题。在原有onchange新加的部分可以做到点击即亮的效果，第五行是detail的内容的name项，第四行是detail的全部内容，如果是原有的方式控制台输出。第一行是detail的标签。这是改变后的控制台输出。
Vant组件库实现App里的TabBar标签栏
04-17 1188
构建产品的TabBar，支持高亮效果
定义tabbar，以及解决原生微信小程序使用vant的tabbar的bug（点击俩次图标才正确激活）
qq_44741577的博客
03-09 1622
custom-tab-bar用自定义组件的方式编写即可，用自定义组件的方式编写即可，该自定义组件完全接管 tabBar 的渲染。另外，自定义组件新增。在导入使用vant （tabbar）组件的时候，发现通过点击切换的方法来更改。路由跳转，会出现图标没用及时对应上，需要第二次点击才对应上的问题。接口，可获取当前页面下的自定义 tabBar 组件实例。的值，用来对应每个页面切换之后展示对应的图标。推荐使用vant的tabber组件。在每一个tab页面的。
van-tabbar-item自定义图标
06-06
如果你想要在 van-tabbar-item 中使用自定义图标，可以按照以下步骤操作： 1. 首先，你需要在项目中引入所需的图标资源文件，可以使用第三方图标库或自己设计的图标。 2. 在 van-tabbar-item 中，使用 icon 属性来指定图标。通常情况下，你可以使用 van-icon 组件中内置的图标，例如 'chat-o'，'home-o' 等等。但是如果你想要使用自定义图标，你需要将 icon 的值设置为你自己定义的图标名称。 3. 在 CSS 中，使用 background-image 属性来指定自定义图标的地址，并设置宽度和高度属性以适应图标的大小。 以下是一个示例代码，用于在 van-tabbar-item 中使用自定义图标： ```html <van-tabbar> <van-tabbar-item icon="custom-icon"></van-tabbar-item> </van-tabbar> ``` ```css /* 自定义图标样式 */ .custom-icon { background-image: url('path/to/custom-icon.png'); width: 24px; height: 24px; } ``` 希望这可以帮助到你！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值