页面间的跳转-navigator---跳转带参数----页面导航（不带返回属性）----点击后显示高亮样式

快捷创建文件夹页面-

现在app.json中pages下直接创建，保存后就自动生成所需的文件

--创建的空文件需要或者加{}xx.json文件

--xx.js文件中需要接入Page({})

不加会报错-不能执行

 

 

<!--

页面间参数传递

1. 传传 跳转链接上加问号参数

2. 接受 onload 的第一个参数（对象）

-->

<navigator url="../demo2/demo2">go demo2 page</navigator>

带参数跳转

<navigator url="../demo2/demo2?name=小明&age=18">小明</navigator>

<navigator url="../demo2/demo2?name=小红">小红</navigator>

接收参数

demo2.js

生命周期

// pages/demo2/demo2.js
Page({
  data:{},
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    console.log(options)
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

　　不带返回--应用于引导页-导航

<navigator url="../demo2/demo2" redirect>跳转过去（不回来了）</navigator>

 ----------------------

高亮

默认none,没有效果

 

<navigator hover-class="my-hover">点我点我</navigator>
<navigator hover-class="none">点我点我</navigator>

<!-- cursor pointer 的方式是一个我们发现的小技巧，可以让任何元素点击时高亮 -->
<image class="hover-demo" src="../../images/poster.jpg"></image>

<button type="primary" bindtap="tapHandle">跳转过去</button>

.my-hover {
    color: red;
}

.hover-demo {
    cursor: pointer;
}　　

js

Page({
    tapHandle: function () {
        // 当我们点击按钮 系统会自动执行这里的代码
        // console.log(1111)
        wx.navigateTo({
          url: '../demo2/demo2?id=123'
        })

        // 相当于加上redirect的 navigator
        // wx.redirectTo({
        //   url: '../demo2/demo2'
        // })
    }
})

　　返回上一页

<button bindtap="backHandle">返回</button>

// pages/demo3/demo3.js
Page({
  data:{},
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  },
  backHandle: function () {
    // 默认返回到上一页
    // wx.navigateBack()

//delta:2//默认返回两个页面

    // 指定delta 就是返回到指定页面
    // delta 过大（超出历史记录）默认返回最开始的页面
    wx.navigateBack({
      delta: 100
    })
  }
})