小程序关于switchTab不能传参的问题

简介: 小程序关于switchTab不能传参的问题

对于下面链接博客的补充

微信小程序:errMsg“:“navigateTo:fail can not navigateTo a tabbar page 报错问题

image.png

上篇博客说道想要跳转到tabbar,把wx.navigateTo更改为wx.switchTab即可。但是又有一个bug就是wx.switchTab不能传参

image.png

以下是解决办法:

wxml

  <van-grid column-num="5">
    <van-grid-item wx:for="{{ Nav }}"bindtap="nav"data-index="{{index}}"icon="{{item.icon}}"text="{{item.name}}" />
  </van-grid>

js

可以换一种思路,跳转页面的时候传参,是为了有个标识,是为了下一个页面更方便的展示信息。我们可以在switch跳转之前设置一个全局变量,到下一个页面的时候,直接去获取全局变量:这里传的是index

//点击轮播下方分类跳转到分类tabber
  nav(e) {
    getApp().index = e.currentTarget.dataset.index
    //设置全局变量 (  app已经定义var app=getApp()   )
    wx.switchTab({
      url: "/pages/classify/classify",
      success: function (e) {    //此方法相当于刷新页面
        var page = getCurrentPages().pop();
if (page == undefined || page == null) return;
        page.onLoad();
      }
    })
  },

1、保存全局变量

getApp().index = e.currentTarget.dataset.index
//设置全局变量 (  app已经定义var app=getApp()   )

2、因为点击跳转并把参数保存到全局变量之后,只能保存一次参数。接受也只能接受一个。所以需要以下代码在每次点击的时候刷新一次重新把参数保存到全局变量

success: function (e) {    //此方法相当于刷新页面
        var page = getCurrentPages().pop();
if (page == undefined || page == null) return;
        page.onLoad();
 }

接收参数

 /**
 * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let index=getApp().index
    consolo.log(index)
  },
相关文章
|
小程序
小程序wx.switchTab的跳转传参问题
小程序wx.switchTab的跳转传参问题
432 0
|
存储 缓存 小程序
小程序页面路由传参的方法?
小程序页面路由传参的方法?
|
小程序
支付宝扫码跳转小程序并传参
支付宝扫码跳转小程序并传参
1799 1
|
小程序 API 数据库
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
293 0
|
小程序 数据库 C++
【微信小程序-原生开发】实用教程16 - 查看详情(含页面跳转的传参方法--简单传参 vs 复杂传参)
【微信小程序-原生开发】实用教程16 - 查看详情(含页面跳转的传参方法--简单传参 vs 复杂传参)
265 0
|
前端开发 小程序 JavaScript
小程序页面导航全家桶:navigateTo、redirectTo、switchTab等方法一网打尽,快速掌握不同场景下的最佳应用!
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
存储 小程序
小程序路由传参的方法?
小程序路由传参的方法?
315 0
|
小程序
小程序页面路由传参的方法?
小程序页面路由传参的方法?
164 0
|
小程序 JavaScript
【微信小程序】-- 页面导航 -- 导航传参(二十四)
【微信小程序】-- 页面导航 -- 导航传参(二十四)
|
小程序
小程序与uniapp如何进行传参
小程序与uniapp如何进行传参
527 0

热门文章

最新文章

下一篇
日志分析软件