小程序页面跳转总结

要求：index.wxml 页面,跳转到 logs.wxml 页面

用到的小程序控件 navigator

属性名	类型	说明
url	String	跳转链接，可以传递参数
open-type	String	跳转方式，参数可为navigateBack、redirect、switchTab
delta	Number	当 open-type 为 ‘navigateBack’ 时有效，表示回退的层数

• 一、wxml 页面实现跳转

下面是根据不同的open-type 进行界面跳转

1.<navigator url = "/pages/logs/logs?title=我是星期八">跳转到新页面</navigator>

2.<navigator url = "/pages/logs/logs?title=我是星期八" open-type = "redirect">跳转到新页面</navigator>

3.<navigator url = "/pages/logs/logs?title=我是星期八" open-type = "switchTab">跳转到新页面</navigator>

• 二、js页面的实现跳转

bindViewTab:function(){

   wx.navigateTo({    //保留当前页面，跳转到应用内的某个页面（最多打开5个页面，之后按钮就没有响应的）
       url:"/pages/logs/logs?title=我是星期八"
   })
   wx.redirectTo({      //关闭当前页面，跳转到应用内的某个页面（这个跳转有个坑，就是跳转页面后页面会闪烁一下，完全影响了我自己的操作体验，太缺德了。）
       url:"/pages/logs/logs?title=我是星期八"
    })
   wx.reLaunch({     //跳转至指定页面并关闭其他打开的所有页面（这个最好用在返回至首页的的时候）
       url:'/pages/index/index'
    })
   wx.switchTab({    //跳转到tabBar页面，并关闭其他所有tabBar页面
       url:"/pages/logs/logs?title=我是星期八"
    })
   wx.navigateBack({     //返回上一页面或多级页面
        delta:1
   })
}

• 三、如何接收跳转传递的参数

上面我们写了如何跳转，并且为了方便讲解，我对每个跳转都加入了参数传递，如果要学习如何传递产生，请看上面的代码，其实原理很简单，就是在url 地址后面加入 ？title=”xxxxx“，title就是参数，下面的代码就教你如何接收参数，接收界面logs.js 在onLoad里面加载其他界面传递过来的参数title，然后再把title赋值给logs.wxml界面

//logs.js
Page({   
  data:{
    title: "", 
  }, 
  onLoad: function(options) {    
    this.setData({    
      title: options.title    
    })    
  }    
})

logs.wxml
<view class="container log-list">{{title}}</view>