页面间跳转
页面间跳转 — 导航
关键标签: navigator
首先注意2个地方:
1.在app.json中书写一个配置项，会自动生成该页面的page下面的2个文件
2.如果新建的page的json文件是空内容，改页面不会被渲染，显示空白，解决方式在page的json中加个{}，让它符合json的规范。
案例演示:
演示页面demo1跳转到demo2的页面，然后点击demo2的图片挑转到demo3的页面。
- 1.准备3个页面
app.json
{ "pages":[ "pages/demo1/demo1", "pages/demo2/demo2", "pages/demo3/demo3" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }, "style": "v2", "sitemapLocation": "sitemap.json" }
- 2.书写demo1的页面，定义个navigator的标签
<!--pages/demo1/demo1.wxml--> <navigator url="../demo2/demo2">go demo2 page</navigator>
- 3.书写demo2的页面
<!--pages/demo2/demo2.wxml--> <text>pages/demo2/demo2.wxml</text> <navigator url="../demo3/demo3"> <image src="../../images/12.png"></image> </navigator>
- 4.书写demo3的页面
<!--pages/demo3/demo3.wxml--> <text>pages/demo3/demo3.wxml</text>
- 看下效果:
会跳转到:
点击图片:
页面间传值
页面间参数传递:
1.传递: 跳转链接上加问号参数
2.接受 pnload的第一个参数(对象)
案例说明:
在demo1中携带参数跳转到demo2页面，看下demo2是否可以接受到参数值。
<!--pages/demo1/demo1.wxml--> <navigator url="../demo2/demo2">go demo2 page</navigator> <navigator url="../demo2/demo2?name=小明&age=18">小明</navigator> <navigator url="../demo2/demo2?name=小红">小红</navigator> <!-- 页面间参数传递: 1.传递: 跳转链接上加问号参数 2.接受 pnload的第一个参数(对象) -->
demo2.js
// pages/demo2/demo2.js Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { console.log(options); }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
测试:
看下打印信息:
显示：接收到了参数。
看下控制台信息:
也接受到了信息。同时页面也已经跳转到了demo2页面
页面导航模式–redirect
前面的导航栏模式，demo1页面跳转到demo2的时候会有个返回，点击返回又返回到了demo1页面。
如果有这个需求:不想返回到原来的页面，就得用到导航的redirect模式（redirect设置为true）。
原来的方式:
可以看到又返回到demo1页面了。
改进：使用redirect方式跳转
<!--pages/demo1/demo1.wxml--> <navigator url="../demo2/demo2" redirect>跳转过去(不回来了)</navigator>
说明，redirect模式设置成功。
导航元素点击高亮
在点击导航时，会有个高亮效果：如下图。
如果设置不高亮？
通过这种方式:
<navigator hover-class="none">点我点我1</navigator>
如何自定义高亮效果
我们可以自己定义hover-class的样式。
<navigator hover-class="my-hover">点我点我</navigator>
.my-hover{ color: red; }
测试:
普通元素如何设置高亮
2种方式，放在导航标签，另一种给元素标签添加cusor:pointer
举例说明:
<!-- cursor pointer 的方式是一个我们发现的一个小技巧，可以让任何袁术点击时高亮 --> <image class="hover-demo" src="../../images/12.png"></image>
.hover-demo{ cursor: pointer; }
页面导航api
wx.navigateTo
跳转到指定的页面。
demo1.wxml
<button type="primary" bindtap="tapHandler">跳转过去</button>
demo1.js
Page({ tapHandler:function(){ //当我们点击按钮，系统会自动执行这里的代码 console.log(111) // wx.navigateTo({ // url: '../demo2/demo2', // }) // 相当于加上redirect的navigator // wx.redirectTo({ // url: '../demo2/demo2', // }) wx.navigateTo({ url: '../demo2/demo2?id=123', }) } })
测试：点击跳转按钮
显示：跳转到了demo2的页面:
携带参数
还是刚才的例子，使用问号携带了id=123.看下控制台
显示参数携带过来了。
wx.redirectTo
导航redirect模式，不能返回原来的页面：
demo.js
Page({ tapHandler:function(){ //当我们点击按钮，系统会自动执行这里的代码 console.log(111) // wx.navigateTo({ // url: '../demo2/demo2', // }) // 相当于加上redirect的navigator wx.redirectTo({ url: '../demo2/demo2', }) // wx.navigateTo({ // url: '../demo2/demo2?id=123', // }) } })
看下效果:
跳转到了demo2的页面:
wx.navigateBack
返回到前面的页面。
- 指定delta就是返回到指定页面（值为数字，1代表前面的第一个页面，2代表前面的第2个页面）
- 当delta过大（超出历史记录）。默认返回最开始的页面
举例说明:
在demo3.页面测试
demo3.wxml
<!--pages/demo3/demo3.wxml--> <text>pages/demo3/demo3.wxml</text> <button bindtap="backHandler">返回</button>
- demo3.js
// pages/demo3/demo3.js Page({ backHandler:function(){ //默认返回到上一页 // wx.navigateBack() //指定delta就是返回到指定页面 //当delta过大（超出历史记录）。默认返回最开始的页面 wx.navigateBack({ delta: 2, }) //wx.navigateTo //wx.navigateBack //wx.redirectTo //传递参数 通过问号 } })
案例演示:
demo1:
tapHandler:function(){ //当我们点击按钮，系统会自动执行这里的代码 console.log(111) wx.navigateTo({ url: '../demo2/demo2', })
点击跳转过去，进入demo2
<!--pages/demo2/demo2.wxml--> <text>pages/demo2/demo2.wxml</text> <navigator url="../demo3/demo3"> <image src="../../images/12.png"></image> </navigator>
点击图片进入demo3
// pages/demo3/demo3.js Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, backHandler:function(){ //默认返回到上一页 // wx.navigateBack() //指定delta就是返回到指定页面 //当delta过大（超出历史记录）。默认返回最开始的页面 wx.navigateBack({ delta: 2, }) } })
点击返回，返回到demo1的页面:
完
