微信小程序--页面跳转和传值

开始

微信小程序–页面跳转和传值

创建文件夹

直接app.json 在pages 添加所有创建文件的名字路由

navigator 对象

URL 属性 hover-class 是点击之后的属性

<navigator class="" target="" url="../demo2/demo2" hover-class="navigator-hover" open-type="navigate">
    go demo2 page
</navigator>

页面之间的传值

通过用？的形式来知道谁点击跳转到哪里 传值?name=小明&age=19

<navigator class="" target="" url="../demo2/demo2?name=小明&age=19" hover-class="navigator-hover" open-type="navigate">
    小明
</navigator>
<navigator class="" target="" url="../demo2/demo2?name=小红" hover-class="navigator-hover" open-type="navigate">
    小红
</navigator>

1. 传 跳传链接上加？
2. 接console.log(options)

页面导航模式

redirect 没有返回键

<navigator class="" target="" url="../demo2/demo2" hover-class="navigator-hover" open-type="navigate" redirect>
    跳转（不返回）
</navigator>

无高亮效果

hover-class=“none”

<!-- 无高亮效果 -->
<navigator class="" target="" url="" hover-class="none" open-type="navigate">
    点我
</navigator>

高亮效果

hover-class=“my-hover” .myhover{backgroundColor:green;} cursor:pointer; 让所有元素高亮

<navigator class="" target="" url="" hover-class="my-hover" open-type="navigate">
    点我
</navigator>

页面导航API

有返回键 wx.navigateTo({})

    // 有返回键
    // wx.navigateTo({
    //   url: '../demo2/demo2',
    //   success: function(res){
    //     // success
    //   },
    //   fail: function() {
    //     // fail
    //   },
    //   complete: function() {
    //     // complete
    //   }
    // })

无返回键 wx.redirectTo({})

  // 无返回键
    wx.redirectTo({
      url: '../demo2/demo2?name=小明&age=18',
      success: function (res) {
        // success
        console.log(res.options)
      },
      fail: function () {
        // fail
      },
      complete: function () {
        // complete
      }
    })

默认返回上一页 delta 是要指定页面的值（倒退） 如果超过原来页面的个数则退到最后一个页面

 // wx.navigateBack  是返回指定页面  delta是要指定页面的值 （倒退）
  // 如果超过原来页面的个数则到最后一个页面
  bindhandel:function(e){
    wx.navigateBack({
      delta: 1
    });
  },