《微信小程序开发实战》学习笔记chapter07 第一个实例 3. 导航传参

3. 导航传参

3.1 声明式导航传参

navigator组件的url属性用来指定将要跳转的页面的路径。同时，路径的后面还可以携带参数。

参数与路径之间使用？分隔

参数键与参数值用=相连

不同参数用&分隔

//在home.wxml文件中：
<!-- 跳转到info页面传参  -->
<navigator url="/pages/info/info?name=zs&age=22">跳转到info页面传参    
</navigator>

3.2 编程式导航传参

第一步，在页面wxml文件中：
<!-- 跳转到info页面传参  -->
<button bindtap="gotoinfocc">跳转到info页面传参</button>
​
第二步，在页面js文件中：
  gotoinfocc(){
    wx.navigateTo({
      url:'/pages/info/info?name=ls&age=23',
    })
  },

3.3 在onLoad中接收导航参数

在info.js文件中： 
  /**
   * 页面的初始数据
   */
  data: {
    query:{}
  },
      
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    console.log(options)
    this.setData({
      query:options
    })
  },

4. 下拉