uniapp 实现tabBar之间传参

这篇具有很好参考价值的文章主要介绍了uniapp 实现tabBar之间传参。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

问题描述:

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

uniapp跳转tabbar传参,uni-app,前端,vue.js


 

解决方法

方法1:使用全局变量:

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页面传递过来的参数

方法2:

setStorageSync(本地缓存)


//name.vue 页

onclick () {
    存起来,到        
     // tabBar 的index页面中获取.
    uni.setStorageSync('Name', value);
    uni.switchTab({
                    url:'/pages/index/index'
                })
}

  index.vue TabBer 页
  uni getStorageSync()//获取存入数据

//在onShow中从本地缓存中获取出来,进行相关操作

onShow() {

  const Name = uni.getStorageSync('id');

  console.log(Name ,'Name ')


}文章来源地址https://www.toymoban.com/news/detail-649403.html

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

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

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

相关文章

  • uni-app自定义tabbar(van-tabbar)

    main.vue custom-tabbar 全部菜单放在一个界面使用v-if显示隐藏的做法是因为单独页面的话第一次切换下标菜单栏会闪烁(但是使用v-if又要自定义导航栏,就…挺离谱的), 如果不使用这种v-if显示的话(单独页面)可以在每个菜单界面加上以下代码(会闪烁),如果大家有更好的

    2024年02月20日
    浏览(48)
  • uni-app动态tabBar,根据不同用户展示不同的tabBar

    因为我们用的是uni-app框架开发,所以在创建项目的时候直接创建uni-ui的项目即可,这个项目模板中自带了uni的一些好用的组件和api。 起初我想着这个效果不难实现,因为官方也有api可以直接使用,所以我最开始尝试就是使用uni的api完成,也就是这个 :uni.setTabBarItem(options) 我

    2024年02月09日
    浏览(46)
  • uni-app tabbar组件

    锋哥原创的uni-app视频教程: 2023版uniapp从入门到上天视频教程(Java后端无废话版),火爆更新中..._哔哩哔哩_bilibili 2023版uniapp从入门到上天视频教程(Java后端无废话版),火爆更新中...共计23条视频,包括:第1讲 uni-app简介、第2讲 uni-app环境搭建、第3讲 uni-app之HelloWorld实现等,

    2024年02月04日
    浏览(50)
  • uni-app 之 tabBar 底部切换按钮

    uni-app 之 tabBar 底部切换按钮 1693289945724.png // 常用颜色 // d81e06 紅 // #f4ea2a 黃 // #1afa29 綠 // #1296db 藍 // #13227a 青 // #d4237a 紫 // #ffffff 白 // #2c2c2c 黑

    2024年02月09日
    浏览(59)
  • uni-app教程一(项目创建、tabbar配置、运行

    导入静态资源包(图片) 页面tabbar配置 { “pages”: [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages { “path”: “pages/index/index”, “style”: { “navigationBarTitleText”: “首页” } }, { “path”: “pages/news/news”, “style”: { “navigationBarTitleText”: “动态

    2024年04月23日
    浏览(50)
  • uniapp小程序路由跳转,使用uni.navigateBack方法,实现跳转传参

    由于小程序跳转限制10层,为了尽可能的减少页面栈,在小程序中会用到uni.navigateBack()方法,使用中难免会遇到页面跳转之间传参的问题。uni.navigateBack和uni.navigateTo、uni.redirectTo方式不同,不能通过路由拼接的方式传参,以下是三种跳转的方法: 在小程序中uni.navigateTo和u

    2024年02月16日
    浏览(59)
  • 解决uni-app小程序原生tabbar 添加阴影问题

    下面是实现的效果  步骤1 创建一个组件  文件名和组件名要一致  步骤2  在组件中实现阴影效果 步骤3 在tabbar 页面使用  直接使用 即可 不用引入  

    2024年02月07日
    浏览(64)
  • uni-app 中两个系统各自显示不同的tabBar

    最近在一个 uni-app 项目中遇到一个需求,在登录页面成功登录以后需要判断身份,不同的身份的进入不同的 tabBar 页面,但是在 uni-app 项目中 pages.json 中的 tabBar 的 list 数组只有一个,且不能写成动态的,那如何实现这个需求呢?答案是需要我们自定义 tabBar 。 目录 1、我们确定在

    2024年04月13日
    浏览(49)
  • uni-app前端H5页面底部内容被tabbar遮挡

    在用uniapp写小程序的时候,底部有一部分内容没显示出来,被底部的tabbar遮挡住了 给最外部的view设置样式 padding-bottom: var(--window-bottom) ,如下 参考1 参考2 使用 uni-app 框架开发的一个项目,发现 H5 端页面底部的内容被导航栏(Tabbar)遮挡,小程序端可以正常显示。 查阅资料

    2024年02月04日
    浏览(62)
  • 解决uniapp中tabbar无法路由跳转

    当我们在小程序中使用底部 TabBar 进行页面跳转时,可能会遇到一些问题。 默认情况下,小程序的页面跳转是使用  uni.navigateTo  方法,但是在底部 TabBar 中,使用  uni.navigateTo  会导致页面重复打开,而不是切换到已打开的页面。这是因为  uni.navigateTo  会创建一个新的页面

    2024年02月19日
    浏览(40)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包