uniapp实现tabBar-switchTab之间的传参方法

 更新时间:2024年01月20日 12:18:00   作者:小跳不会Coding  
这篇文章主要介绍了uniapp实现tabBar-switchTab之间的传参方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

一、需求:

tabbar之间跳转页面时,需要传递一个参数。

官方文档明确说明: 跳转tabBar栏的页面只能使用 uni.switchTab 并且url 路径后面不能传递参数。

二、解决方法:

方法1:setStorageSync(本地缓存)

//index.vue 页

onclick () {
    存起来,在另一个页面中获取.
    uni.setStorageSync('myIndex', value);
    uni.switchTab({
            url:'/pages/user/user'
      })
}

//user.vue 页(在onShow中从本地缓存中获取出来,进行相关操作)

onShow() {
  const myIndex= uni.getStorageSync('myIndex');
  console.log(myIndex)
}

方法2:使用全局变量:

main.js 定义全局变量

Vue.prototype.$name = '';

页面1: name.vue

   this.$name= "chuanzhi";
    uni.switchTab({
         url:'/pages/index/index'
    })

页面2:index.vue
(注意一定要放在onShow生命周期里面及时更新数据,因为tabBar会有缓存机制此时再次进入页面onLoad不会执行)

onShow(){
    this.info.name =  this.$name//赋值取得参数
}

此时this.info.name 就是name.vue页面传递过来的参数

到此这篇关于uniapp实现tabBar-switchTab之间的传参的文章就介绍到这了,更多相关uniapp tabBar-switchTab传参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript降低代码圈复杂度优化技巧

    JavaScript降低代码圈复杂度优化技巧

    当一个项目经过持续迭代,不断增加功能,逐渐变成一个复杂的产品时,新功能的开发变得相对困难,其中一个很大的原因是代码复杂度高,导致可维护性和可读性都很差,本文将从前端JavaScript的角度出发,介绍一些有效的方法和技巧来优化前端代码的圈复杂度
    2023-10-10
  • JavaScript设计模式之中介者模式详解

    JavaScript设计模式之中介者模式详解

    当对象之间进行多对多引用时,进行开发,维护,阅读时将变得特别痛苦。在这些对象之间添加中间者,使它们都只与中介者,当中介者处理完一个对象的请求后,将结果通知于其他对象
    2022-08-08
  • 基于HTML+JS实现简单的年龄计算器

    基于HTML+JS实现简单的年龄计算器

    JavaScript提供了一些内置的日期和时间函数,有助于从日期(出生日期)开始计算年龄。本文主要介绍了使用这些JavaScript方法,制作一个简单的年龄计算器,快来跟随小编一起学习学习吧
    2021-12-12
  • Three.js使用OrbitControls后修改相机旋转方向无效解决办法

    Three.js使用OrbitControls后修改相机旋转方向无效解决办法

    three.js是用javascript写的基于webGL的第三方3D库,下面这篇文章主要给大家介绍了关于Three.js使用OrbitControls后修改相机旋转方向无效的解决办法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-01-01
  • JavaScript运动原理基础知识详解

    JavaScript运动原理基础知识详解

    这篇文章主要介绍了JavaScript运动原理基础知识详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-04-04
  • js+canvas实现可自动吸附闭合的鼠标绘制多边形

    js+canvas实现可自动吸附闭合的鼠标绘制多边形

    这篇文章主要为大家详细介绍了js+canvas实现可自动吸附闭合的鼠标绘制多边形,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 前端实现电子签名(web、移动端)通用的实战过程

    前端实现电子签名(web、移动端)通用的实战过程

    电子签名通俗来说就是通过技术手段实现在电子文档上加载电子形式的签名,下面这篇文章主要给大家介绍了关于前端实现电子签名(web、移动端)通用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • 利用bootstrapValidator验证UEditor

    利用bootstrapValidator验证UEditor

    这篇文章主要为大家详细介绍了利用bootstrapValidator验证UEditor,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • javaScript中with函数用法实例分析

    javaScript中with函数用法实例分析

    这篇文章主要介绍了javaScript中with函数用法,实例分析了javascript中with的功能、定义及相关使用技巧,需要的朋友可以参考下
    2015-06-06
  • JS跳出循环的5种方法总结(return、break、continue、throw等)

    JS跳出循环的5种方法总结(return、break、continue、throw等)

    想必大家都遇到过循环遍历时遇到满足条件的时候就跳出循环这样的需求,于是整理了一篇各种循环是如何结束的,这篇文章主要给大家介绍了关于JS跳出循环的5种方法,分别是return、break、continue、throw等的相关资料,需要的朋友可以参考下
    2024-05-05

最新评论