微信小程序 navigator 用来实现页面跳转功能

也许你迷茫，但是我想说，在你迷茫的同时，保持本心，过好今天就好。

在微信小程序开发中，navigator 用来实现页面路由功能，比如 A页面中点击页面打开B页面

1 navigator 默认方式打开新的页面

<navigator url="/pages/code1/navigator/bPage"><text>打开B页面</text>
</navigator>

等效于

<navigator url="/pages/code1/navigator/bPage" open-type="navigate"><text>打开B页面</text>
</navigator>

open-type 是指定了页面跳转的方式，默认是 navigate ，页面层叠方式如下

对应的有点击事件，在JS中打开页面

<view bindtap="openNavigatorBPage" data-index='1'><text>打开B页面</text></view>

在这里 data-index 是我页面绑定的参数，在对应的方法中通过 currentTarget.dataset.index 方式获取

如果我写的是 data-id ，那么点击事件中获取方式为 currentTarget.dataset.id

  openNavigatorBPage:function (options) {//获取绑定的参数let id = options.currentTarget.dataset.index;wx.navigateTo({url: '/pages/code1/navigator/bPage?id='+id,})},

然后在目标页面中的 onLoad 方法中可以获取这个参数

  onLoad: function (options) {let id = options.id;},

2 redirect 替换当前页面

open-type 可取值为 redirect ，就是直接替换当前页面

<!--类似a标签  open-type 跳转方式-->
<navigator url="/pages/code1/navigator/bPage" open-type="redirect"><text>打开B页面</text>
</navigator>

对应的 js 方法为

 wx.redirectTo({url: '/pages/code1/navigator/bPage?id='+id,})

3 reLaunch 重新加载当前页面

open-type 可取值为 reLaunch ，就是相当于是重新加载了一下当前页面

<navigator url="/pages/code1/navigator/bPage" open-type="reLaunch"><text>打开B页面</text>
</navigator>

对应的 js 方法为

 wx.reLaunch({url: '/pages/code1/navigator/bPage?id='+id,})

4 navigateBack 关闭当前页面

可以直接在页面中使用 navigator 标签嵌套

<navigator open-type="navigateBack"><text>关闭页面</text>
</navigator>

等效于

<view bindtap="closeBPage" data-index='1'><text>关闭B页面</text>
</view>

  closeBPage: function () {wx.navigateBack()},

5 navigateBack 关闭当前页面并携带参数

A页面通过wx.navigateTo跳入到B页面，然后B页面执行wx.navigateBack返回到A页面时候传给A页面参数

A页面中定义接收

Page({/*** 页面的初始数据*/data: {param: undefined,},/*** 生命周期函数--监听页面显示*/onShow: function () {let param = this.data.param;if (param) {//有回传参数 处理页面业务逻辑}},
）；//打开B页面openNavigatorBPage: function (options) {//获取绑定的参数let id = options.currentTarget.dataset.index;wx.re({url: '/pages/code1/navigator/bPage?id=' + id,})},

在B页面中，关闭B页面的时候，设置回传参数

closeBPage: function () {//getCurrentPages()函数是用来获取当前页面栈的实例，//返回的是一个按栈的顺序排列的数组pages_arr,且数组中的第一项为首页，最后一项为当前页。//获取当前页面js里面的pages里的所有信息。let pages = getCurrentPages();//pages[pages.length - 2]是指的上一页，然后获取到上一个页的page对象后直接执行修改param的操作，这样就实现了在B页面修改A页面数据的功能let prevPage = pages[pages.length - 2];prevPage.setData({param: 111, // 设置需要传递的参数})wx.navigateBack({delta: 1})},

完毕

微信小程序 navigator 用来实现页面跳转功能相关推荐

微信小程序（九）：页面跳转
功能点:页面跳转本文基于微信小程序公测版,IDE:微信开发者工具 0.11.122100 这里记录一下小程序中页面跳转的方式. 从跳转的方式(或说成打开新页面的方式)来说大致可分为:请求转发,请求重 ...
Python+微信小程序开发（四）页面跳转和获取用户信息
上一篇已经介绍了如何搭建一个自己的静态页面,接下来则涉及到一些用户信息获取与跳转的操作. 一.页面跳转首先新建一个跳转页面,按上篇的操作生成pages/redirect/redirect. 1.对标 ...
微信小程序：实现选择视频 + 页面跳转 + 数据传送功能
一.实现的功能还是这个熟悉的页面: 这次实现: 点击"选择视频"按钮,可以从本地相册中选取相册或者图片,并传回给该页面再选择完视频之后,会出现一个新的页面,并且这个页面会出现刚 ...
微信小程序登录页验证与页面跳转
微信小程序登录页实现验证登录和页面跳转利用js实现验证登录和页面跳转,开发工具是微信开发者工具. wxml部分登录页面的代码,需要再创建一个主页. <view class="wel ...
微信小程序的本地存储、页面跳转、以及请求封装
一.常见的交互反馈设计 1.使用button组件的loading属性,在按钮的文字前边出现一个Loading 2.wx.showToast显示提示(一般搭配wx.hideToast使用) wx.sho ...
微信小程序—点击按钮实现页面跳转
按钮button标签通过bindtap属性绑定点击事件实现页面跳转. //wxml示例代码 <button bindtap="gotoPage">按钮</butt ...
微信小程序入门 ——增删改查+页面跳转+传值取值+布局样式
2019独角兽企业重金招聘Python工程师标准>>> **目标场景 **分类管理技术点读取分类列表点击某分类进入编辑页,操作编辑与删除点击列表页底部按钮,跳转添加,共用编辑 ...
【微信小程序】—— wx.showToast 延迟页面跳转、一闪而过问题解决办法
场景一: 发布文章,点击发布以后用wx.showToast显示发布成功后跳转,但此时基本没显示,直接跳转了解决方法: wx.showToast({title: '发布成功',icon: 'succe ...
自学微信小程序开发第五天- 页面切换相关
自学微信小程序开发第五天- 页面切换相关创建多个页面页面间跳转页面间传值另一个页面跳转的方式(重定向) 点击跳转元素时的样式导航API 研究过页面样式设计后,就是多页面的呈现了,这就需要研究 ...

微信小程序 navigator 用来实现页面跳转功能

1 navigator 默认方式打开新的页面

2 redirect 替换当前页面

3 reLaunch 重新加载当前页面

4 navigateBack 关闭当前页面

5 navigateBack 关闭当前页面并携带参数

微信小程序 navigator 用来实现页面跳转功能相关推荐

最新文章

热门文章

微信小程序 navigator 用来实现页面跳转功能

1 navigator 默认方式打开新的页面

2 redirect 替换当前页面

3 reLaunch 重新加载当前页面

4 navigateBack 关闭当前页面

5 navigateBack 关闭当前页面 并携带参数

微信小程序 navigator 用来实现页面跳转功能相关推荐

最新文章

热门文章

5 navigateBack 关闭当前页面并携带参数