vant Tabbar底部导航访问二级也没,返回.tabbar的索引始终显示首页. 与界面不对应的问题

最新推荐文章于 2024-06-11 15:13:17 发布
最新推荐文章于 2024-06-11 15:13:17 发布
阅读量1.6k 收藏 3
点赞数 4
分类专栏： vant tabbar web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50061893/article/details/116741287
版权
web前端 同时被 3 个专栏收录
13 篇文章 0 订阅
订阅专栏
vant
2 篇文章 0 订阅
订阅专栏
tabbar
1 篇文章 0 订阅
订阅专栏

1.用vant的tabbar组件,做底部导航,在二级页面返回到一级页面底部导航索引不对应

下面上图,点击返回后应该高亮我的上报
在这里插入图片描述
最开始的做法是用vmodel配合change事件 来进行 控制.贴代码(坑的要死千万不要用这个方式,后面想了很多办法,不如监听,计算属性,本地存储) 都没能完全解决

在这里插入图片描述

2.解决方法是,切换route模式.切换后一行js代码都不需要 完美解决问题

在这里插入图片描述
自闭好久,仔细百度了下,在看了看api解决了这个坑. 发个帖记录一下.

贴代码

在这里插入图片描述

冲动消费
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
vantUI应用（Tabbar标签页）返回上一页的失效问题
草巾冒小子的博客
10-13 2318
使用了vantUI框架的（Tabbar标签页）组件，开发了个页脚固定导航： 我的操作说明： 登录页 /login 登录成功后，进入首页 / 然后选择首页页脚导航，个人中心 /personal 发现在点击个人中心返回按钮的时候，直接返回到了登录页，为什么呢？ 原因分析 · （源码分析）： 经过项目对应文件的源代码查看（导航组件【代码如下】）和 vantUI组件的官方解说，原来是因为使用了 关键词：replace （是否在跳转时替换当前页面历史），导致页面的历史路由记录被替换了。所以浏览器点击返
uni-app框架 tabBar（底部导航）创建的方法与外界跳转
01-20
在移动应用开发中，底部导航栏（TabBar）是一个至关重要的设计元素，它提供了一种简单直观的方式，让用户能够在不同的主要功能之间切换。在uni-app框架中，创建和管理底部导航栏是一个相对直接的过程，本篇文章将...
解决vantUI底部tabbar导航与页面不对应问题(window.loaction.hash)
小绵杨
02-12 1897
目录前言解决写在最后 前言 有一个需求是利用vant底部的tabbr组件，搭配vueRouter，实现路由导航。需要自定义图标，并且选中后图标应该变换选中后的样式。vantui是提供了路由模式的tabbar的，但是好像不支持自定义图标。所以用了下图的方法： 使用后，发现一个问题，就是如果进入二级页面，也就是不包含tabbar组件的页面，那么当前选中的tabbar项就丢失了，会变回默认的0，所以必须在离开tabbar组件所在页面的时候，记住当前选中的tabbar项或者判断当前路由，实现根据路由重新初始化ta
van-tab解决切换标签页，自动置顶，或者滚动位置不会记录
最新发布
zthtt的博客
06-11 517
tab页切换时记录位置
vant Tabbar 标签栏跳转二级页面时隐藏标签栏
m0_59023970的博客
03-08 803
vant Tabbar 标签栏跳转二级页面时隐藏标签栏。如何使用vant就不描述了，大家肯定会的，简单点咯，直接上代码。
vant自定义二级菜单
马优晨
04-23 3187
（1）组件名字： ThreeLevel （2）组件代码： <template> <div> <button @click="showM">{{ value || "选择省份" }}</button> <button @click="showC">{{ value2 || "选择城市" }}</button&gt...
2022/9/22VUE2.X Tabbar标签栏切换以及二级路由的用法
weixin_54534229的博客
09-22 639
2022/9/22VUE2.X Tabbar标签栏切换以及二级路由的用法
H5底部tabbar模板，基于vant组件库及使用最新脚手架搭建
08-25
基于vue开发H5，使用vant的UI组件开发界面，该简单模板 1. px自动转化响应式rem单位。更容易更高效开发，像素级还原设计稿； 2. axios请求封装； 3. 使用vuex管理底部tabbars的数据，实现权限控制； 4. 下拉刷新，...
小程序使用Vant weapp的索引栏IndexBar无法正常跳转至对应锚点且底部异常
01-03
小程序使用Vant weapp的索引栏IndexBar组件无法正常跳转至对应锚点，且无变色效果，但滚动正常。 Vant UI库是采用dist文件引入的方式导入。 按官方demo在xx.json引入组件 van-index-bar: ../../dist/index-bar/...
几代码实现导航栏透明渐变、实现TabBar中间凸起
11-19
在iOS应用开发中，创建美观且具有个性化的用户界面是提升用户体验的关键因素之一。本教程将探讨如何通过几行代码实现导航栏的透明渐变效果以及TabBar中间按钮的凸起设计，这两种特性都能使你的应用程序更加吸引人。...
vue自定义底部导航栏Tabbar的实现代码
12-29
如图所示，要完成类似的一个底部导航切换。 首先。我们需要分为5个大的VUE文件。可以根据自己的习惯来放在不同的位置。 我将5个主要的vue文件放在了5个不同的文件夹 然后,在components文件夹里新建Tabbar.vue/以及...
底部导航栏进入详情页不显示
Aa__Ki的博客
09-30 1185
在写移动端项目的时候，一般情况下一级页面是需要底部导航的，所以说就有些页面是不需要底部导航条的，比如说，详情页就不得要底部导航。 利用路由元（meta）设置参数 先创建底部的导航栏 在conponents文件夹下面创建Tabbar.vue,我用的是vant的Tabbar组件 <div class="tabbar"> <van-tabbar v-model="active" :placeholder="true" safe-area-inset-bottom route>
vue2实现路由跳转后隐藏底部固定导航栏Tabber的一种方式
欢迎来到长风沛雨的博客
05-16 1622
vue2实现路由跳转隐藏底部tabber导航案例
软键盘的调起导致原来的界面被挤上去，或者导致界面下面的tab导航被挤上去
weixin_39178206的博客
04-16 373
解决方法： 使用Manifest中的Activity的android:windowSoftInputMode的"adjustPan"属性。 另外注意：有关软键盘的问题可参考android:windowSoftInputMode中属性
vue vant不同tab切换加载更多且返回来后内容不改变的实现
jjw_zyfx的博客
04-02 2533
vue vant不同tab切换加载更多且返回来后内容不改变的实现
TabBar 控件切换页面数据保留的方法
qq_45057298的博客
08-18 628
在微信小程序中，TabBar 控件切换页面时，默认情况下数据是不会被保留的。使用全局数据：将需要保留的数据存储在 app.js 中的全局数据中，这样无论在哪个页面切换，数据都会保留。使用组件通信：当 TabBar 切换页面时，通过自定义事件或消息订阅机制，将数据传递给目标页面。以上是三种常见的在切换页面时保留数据的方法，你可以根据自己的需求选择一种或多种方式来实现。使用缓存机制：将需要保留的数据通过缓存的方式存储起来，在切换页面时从缓存中读取数据。在需要保留数据的页面中，使用。在切换到页面时，使用。
【Vant 】组件基础使用
weixin_47375144的博客
01-17 2181
1、ImagePreview 图片预览 <template> <van-cell title="图片预览" center> <img :src="images" @click="choosePicture(images)" /> </van-cell> </template> <script> import { ImagePreview } from 'vant' export default{ dat
vant-tabbar默认选中失效问题
tianmeng.luo的博客
01-04 1847
vant-tabbar 默认选中项失效
vant tabbar
08-30
Vant Tabbar 是一个基于 Vant UI 框架的选项卡组件，用于在移动端创建底部导航栏。它允许你在页面底部放置多个标签按钮，并且可以通过切换标签来切换页面内容。使用 Vant Tabbar 可以方便地实现类似微信底部导航栏的...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值