关于vant 的tabbar功能

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

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

一、根据path路径

二、自定义的model

但是!但是! 但是!

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

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

 <allTabbar :active="0" />

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

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

各位弟兄姊妹们,还有其他好用的方法吗?期待。。。。。。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/114989.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

贪吃蛇项目实践

游戏背景&#xff1a; 贪吃蛇是久负盛名的游戏&#xff0c;它也和俄罗斯⽅块&#xff0c;扫雷等游戏位列经典游戏的⾏列。 实现基本的功能&#xff1a; 贪吃蛇地图绘制 蛇吃⻝物的功能 &#xff08;上、下、左、右⽅向键控制蛇的动作&#xff09; 蛇撞墙死亡 蛇撞⾃⾝死亡 计…

rust学习——栈、堆、所有权

文章目录 栈、堆、所有权栈(Stack)与堆(Heap)栈堆性能区别所有权与堆栈 所有权原则变量作用域所有权与函数返回值与作用域 栈、堆、所有权 栈(Stack)与堆(Heap) 栈和堆是编程语言最核心的数据结构&#xff0c;但是在很多语言中&#xff0c;你并不需要深入了解栈与堆。 但对于…

中间件安全-CVE复现WeblogicJenkinsGlassFish漏洞复现

目录 服务攻防-中间件安全&CVE复现&Weblogic&Jenkins&GlassFish漏洞复现中间件-Weblogic安全问题漏洞复现CVE_2017_3506漏洞复现 中间件-JBoos安全问题漏洞复现CVE-2017-12149漏洞复现CVE-2017-7504漏洞复现 中间件-Jenkins安全问题漏洞复现CVE-2017-1000353漏…

idea设置字体大小快捷键 Ctrl+鼠标上下滑 字体快捷键缩放设置

双击 按住ctrl鼠标滑轮上划放大就好了 这个双击设置为&#xff0c;Ctrl鼠标下滑 字体缩小就好了

手把手创建属于自己的ASP.NET Croe Web API项目

第一步&#xff1a;创建项目的时候选择ASP.NET Croe Web API 点击下一步&#xff0c;然后配置&#xff1a; 下一步&#xff1a;

Adobe Photoshop 基本操作

PS快捷键 图层 选择图层 Ctrl T&#xff1a;可以对图层的大小和位置进行调整 填充图层 MAC: AltBackspace (前景) or CtrlBackspace (背景) WINDOWS: AltDelete (前景) or CtrlDelete (背景) 快速将图层填充为前景色或背景色 平面化图层&#xff08;盖印图层&#xff09…

性能测试LoadRunner02

本篇主要讲&#xff1a;通过Controller设计简单的测试场景&#xff0c;可以简单的分析性能测试报告。 Controller 设计场景 Controller打开方式 1&#xff09;通过VUG打开 2&#xff09;之间双击Controller 不演示了&#xff0c;双击打开&#xff0c;选择Manual Scenario自…

《视觉 SLAM 十四讲》V2 第 9 讲 后端优化1 【扩展卡尔曼滤波器 EKF BA+非线性优化(Ceres、g2o)】

文章目录 第9讲 后端19.1.2 线性系统和 KF9.1.4 扩展卡尔曼滤波器 EKF 不足 9.2 BA 与 图优化9.2.1 投影模型和 BA 代价函数9.2.2 BA 的求解9.2.3 稀疏性 和 边缘化9.2.4 鲁棒核函数 9.3 实践&#xff1a; Ceres BA 【Code】本讲 CMakeLists.txt 9.4 实践&#xff1a;g2o 求解 …

100 # mongoose 的使用

mongoose elegant mongodb object modeling for node.js https://mongoosejs.com/ 安装 mongoose npm i mongoose基本示例 const mongoose require("mongoose");// 1、连接 mongodb let conn mongoose.createConnection("mongodb://kaimo313:kaimo313loc…

sql高级教程-索引

文章目录 架构简介1.连接层2.服务层3.引擎层4.存储层 索引优化背景目的劣势分类基本语法索引结构和适用场景 性能分析MySq| Query Optimizerexplain 索引优化单表优化两表优化三表优化 索引失效原因 架构简介 1.连接层 最上层是一些客户端和连接服务&#xff0c;包含本地sock通…

1 Go的前世今生

概述 Go语言正式发布于2009年11月&#xff0c;由Google主导开发。它是一种针对多处理器系统应用程序的编程语言&#xff0c;被设计成一种系统级语言&#xff0c;具有非常强大和有用的特性。Go语言的程序速度可以与C、C相媲美&#xff0c;同时更加安全&#xff0c;支持并行进程。…

[架构之路-241]:目标系统 - 纵向分层 - 企业信息化与企业信息系统(多台企业应用单机组成的企业信息网络)

目录 前言&#xff1a; 一、什么是信息系统&#xff1a;计算机软件硬件系统 1.1 什么是信息 1.2 什么是信息系统 1.3 什么是信息技术 1.4 什么是信息化与信息化转型 1.5 什么是数字化与数字化转型&#xff08;信息化的前提&#xff09; 1.6 数字化与信息化的比较 1.7 …

Zookeeper、Kafka集群与Filebeat+Kafka+ELK架构、部署实例

Zookeeper、Kafka集群与FilebeatKafkaELK架构、部署实例 一、Zookeeper1.1、Zookeeper 定义1.2、Zookeeper 工作机制1.3、Zookeeper 特点1.4、Zookeeper 数据结构1.5、Zookeeper 应用场景1.5、Zookeeper 选举机制1.5.1、 第一次启动选举机制1.5.2、 非第一次启动选举机制 二、Z…

二、UI入门

1. QWidget类 QWidget类是Qt所有图形用户界面&#xff08;组件&#xff09;的基类&#xff0c;因此QWidget类内部规定了所有最基础的UI相关功能。例如以下成员&#xff1a; ● width : const int 宽度&#xff08;单位&#xff1a;像素&#xff0c;后文同&#xff09; Qt中的…

数据结构-树的概念结构及存储

&#x1f5e1;CSDN主页&#xff1a;d1ff1cult.&#x1f5e1; &#x1f5e1;代码云仓库&#xff1a;d1ff1cult.&#x1f5e1; &#x1f5e1;文章栏目&#xff1a;数据结构专栏&#x1f5e1; 目录 一、树的基本概念及结构 1树的概念 2树的存储 二、二叉树的概念及结构 1二叉树的概…

互联网Java工程师面试题·Java 面试篇·第五弹

目录 79、适配器模式和装饰器模式有什么区别&#xff1f; 80、适配器模式和代理模式之前有什么不同&#xff1f; 81、什么是模板方法模式&#xff1f; 82、什么时候使用访问者模式&#xff1f; 83、什么时候使用组合模式&#xff1f; 84、继承和组合之间有什么不同&#…

改进YOLO系列 | YOLOv5/v7 引入 Dynamic Snake Convolution | 动态蛇形卷积

准确分割拓扑管状结构,如血管和道路,在各个领域中至关重要,可以确保下游任务的准确性和效率。然而,许多因素使任务复杂化,包括细小的局部结构和可变的全局形态。在这项工作中,我们注意到管状结构的特殊性,并利用这一知识来引导我们的DSCNet,以在三个阶段同时增强感知:…

【CSS】常见 CSS 布局

1. 响应式布局 <!DOCTYPE html> <html><head><title>简单的响应式布局</title><style>/* 全局样式 */body {font-family: Arial, sans-serif;margin: 0;padding: 0;}/* 头部样式 */header {background-color: #333;color: #fff;padding: …

论文导读|9月MSOM文章精选:智慧城市运筹

推文作者&#xff1a;郭浩然 编者按 本期论文导读围绕“智慧城市运筹”这一话题&#xff0c;简要介绍并分析了近期的三篇MSOM文章&#xff0c;分别涉及了最后一公里配送中的新模式&#xff1a;“司机辅助”&#xff0c;易腐库存管理的新策略&#xff1a;“截断平衡”&#xff0…

[H5动画制作系列]雪花随机产生飘落

雪花图片参考: 全局代码: var max120; var index0; 第一帧代码: index; if(index<max){posX550*Math.random();posY220*Math.random()-100;scale0.8*Math.random()0.2;var snowflakenew lib.snowlink();snowflake.xposX;snowflake.yposY;snowflake.scaleXscale;snowflake…