小程序之页面跳转方式总结

一 、基本跳转

1.使用组件<navigator>标签来实现。

特点:点击有按下的效果

<navigator url="../job_detail/job_detail?isShowCompanyDetail=true&iscollect={{item.iscollect}}"> 跳转 </navigator> 

2.给页面布局加监听时间bindtap事件。然后在方法里面。通过wx.navigatorTo来实现跳转。

特点:点击无按下的效果。

gotoPage: function () { 
     wx.navigateTo({ 
         url: '../list/list', 
         success: function (res) { 
                 // success 
         }, 
         fail: function () { 
               // fail 
         }, 
         complete: function () { 
             // complete 
         } 
   }) 
}, 

3.通过wx.redirectTo实现跳转。

特点:关闭当前页面,跳转到应用内某个页面

toList: function (event) { 
     var provinceName = event.currentTarget.id; 
     wx.redirectTo({ 
     url: '../city/city?province='+provinceName, 
     success: function (res) { 
         // success 
     }, 
     fail: function () { 
         // fail 
      }, 
      complete: function () { 
         // complete 
       } 
   }) 
 } 

4.wx.navigateBack方法

关闭当前页面。返回上一页面或多级页面

wx.navigateBack({ 
    delta: 1, // 回退前 delta(默认为1) 页面 
    success: function (res) { 
        // success 
    }, 
    fail: function () { 
      // fail 
    }, 
    complete: function () { 
        // complete 
      } 
 }) 

给上一个页面赋值

var pages = getCurrentPages(); 
var prevPage = pages[pages.length - 2];//上一个页面。 
prevPage.setData({ 
     bank_cn: bank_cn, 
     bank: bank 
}) 

重点:
tabBar里一般就是四个主页面,这些主页面之间的跳转就像tab切换,这几个页面需要在tabBar里另外配置,普通页面向这四个主页面跳转的时候,不能使用navigator,需用switchTab

实例:从首页跳到tabBar页,并且要带上参数.首先我是这样做的:

在index.js中:

toCategory:function(event){
    var cate_id = event.currentTarget.dataset.cate_id;
    wx.switchTab({
      url: '../category/category?cate_id='+cate_id,
    });
  }, 

按照上面写的在category.js里得不到数据;

onLoad:function(options){

console.log(options);

}

然后查看了下官方文档.

wx.switchTab(OBJECT)

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

OBJECT 参数说明:

参数 类型 必填 说明
url String 需要跳转的 tabBar 页面的路径(需在 app.json 的 tabBar 字段定义的页面),路径后不能带参数
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

可以看到url路径后不能带参数.这下就尴尬了.因为我必须要带一个参数过去才能满足业务的需求;走了一个捷径.思路:跳转的时候在全局变量里设置一个变量cate_id,调到category.js中后.调取全局变量里的cate_id,用完后,再把扎个变量清除掉.具体实施如下:

首页index.js中:

toCategory:function(event){
    var cate_id = event.currentTarget.dataset.cate_id;
    app.globalData.cate_id=cate_id;//设置全局变量(app已经定义 var app=getApp())
    wx.switchTab({
      url: '../category/category'
    });
  }, 

分类页category.js中:

onLoad:function(options){
    var that = this
    var cate_id=app.globalData.cate_id
    wx.request({
      url: app.globalData.httpsurl +'public/index.php?s=product/index',
      data:{
        cate_id:cate_id,
      },
      success:function(res){
        //清除全局变量cate_id
        app.globalData.cate_id=""
        that.setData({
          alldata:res.data,
        })
      }
    })
  }, 

微信小程序wx.switchTab跳转到tab页面后onLoad里面的方法不执行

解决这种问题的方法页有很多中,最简单的就是在启动页添加跳转成功的方法

wx.switchTab({
      url: '/pages/index/index',
      success: function (e) {
        var page = getCurrentPages().pop();
        if (page == undefined || page == null) return;
        page.onLoad();
      }
    })

上面的转化就可以完成业务逻辑的需要了.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,294评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,493评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,790评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,595评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,718评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,906评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,053评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,797评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,250评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,570评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,711评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,388评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,018评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,796评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,023评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,461评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,595评论 2 350