uniapp 实现tabBar-switchTab之间的传参

这篇具有很好参考价值的文章主要介绍了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页面传递过来的参数文章来源地址https://www.toymoban.com/news/detail-809844.html

到了这里,关于uniapp 实现tabBar-switchTab之间的传参的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue路由的传参

    Vue传参方式可以划分为params传参(参数隐藏在路径中)和query传参(参数在?后)俩种方式 要注意 to  和 :to 的不同:  to 不带参数 , :to 带参数 (1)使用params 传参 vue页面 router-link :to=\\\"{name:\\\'Test7\\\',params:{tid:1,title:\\\'hello test7\\\'}}\\\"测试7-路由/router-link  要修改路由文件( router目录下

    2024年02月21日
    浏览(38)
  • axios的传参方式

    目录 1、data传参 2、使用 params 传递查询参数: 3、使用路径参数传递数据: 在使用 Axios 发送 HTTP 请求时,有三种常见的传参方式: data 、 params 和路径参数 1、data传参 2、使用  params  传递查询参数: params 参数通常用于GET请求中添加查询参数,而对于POST请求,一般使用

    2024年01月18日
    浏览(63)
  • uni-app uni.switchTab和uni.reLaunch跳转tabbar页面

    uni.switchTab: 跳转列表不会刷新 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。 uni.reLaunch: 跳转列表会刷新 关闭所有页面,打开到应用内的某个页面。( 可以跳转到tabBar 页面 ) 但如果是列表的自定义表头有多个title的时候需要加参数才能返回到对应的列表 如下图所示

    2024年02月11日
    浏览(55)
  • 微信小程序组件的传参

     # 父子关系      1.父向子传参     // 子组件:通过 properties 声明要从父组件中接收的数据     //    组件的属性列表     properties:{         tabId:String     }     // 父组件:通过自定义属性的形式传递数据。以子组件中定义的 key 为属性名,以要传递的数据为属性值     li

    2024年02月10日
    浏览(44)
  • Django_获取api接口的传参

    目录 当参数为form-data 或者x-www-form-urlencoded类型时,使用request.POST获取到参数 当参数为raw类型时,使用request.body获取到参数,获取的参数需要经过处理才能使用 源码等资料获取方法 获取参数方式  获取参数方式   各位想获取源码的朋友请 点赞 + 评论 + 收藏 ,三连! 三连

    2024年02月15日
    浏览(46)
  • 列表进入详情页的传参问题(vue的问题)

    c页面的路径为 http://localhost:8080/#/detail?id=1 ,可以看到传了一个参数id=1,并且就算刷新页面id也还会存在。此时在c页面可以通过id来获取对应的详情数据,获取id的方式是 this.$route.query.id vue传参方式有:query、params+动态路由传参。 说下两者的区别: 1.query通过path切换路由,

    2024年01月19日
    浏览(36)
  • 【小程序】uni-app 页面的传参和接参

    值得一提的是小程序只能使用字符串的方式进行传递,不像vue的路由传参。至于为什么要这样,这就需要看文档怎么说了。 注意:传递参数只能以 ?key=valuekey=value 方式传递 使用 onLoad() 钩子函数来接收 小程序只能以 字符串的方式进行传递和接收,那么复杂类型对象和数组怎

    2024年02月02日
    浏览(55)
  • 学习笔记230804---restful风格的接口,delete的传参方式问题

    如果后端提供的删除接口是restful风格,那么使用地址栏拼接的方式发送请求,数据放在主体中,后端接受不到,当然也还有一种可能,后端在这个接口的接参设置上是req.query接参。 问题描述 今天遇到的问题是,delete接口,需要传id,后端需要id的数据类型是lang类型,使用数

    2024年02月12日
    浏览(40)
  • R语言【技巧】——判断自定义函数的传参内容是否符合要求

    比如 对一个应该传入 数值型 ,数值为 0 或 1 的参数: 比如 对一个应该传入 字符型 ,字符串为 某个向量元素之一 的参数,类似于选项框:

    2024年01月23日
    浏览(46)
  • Postman传递@requestbody标注的List集合的传参遇到的问题

    我们想测试如下接口 这里对应了三个传入参数,因为deviceList是必须的,Device作为我们自己封装的JavaBean,我们想要直接传参的话,前端传递一个List过来,这个是被@Requestbody修饰的,同时还存在两个由@RequestParam修饰的包装类,因此, @RequestBody主要用来接收前端传递给后端的

    2024年02月16日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包