我的编程空间,编程开发者的网络收藏夹
学习永远不晚

微信小程序返回上一页的各种方法实例

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

微信小程序返回上一页的各种方法实例

返回上一页,一共有4中方法,每种方法都有不一样细节

一、方法罗列

函数说明
navigator保留当前页面,在wxml使用
wx.navigateTo保留当前页面,在js使用
wx.redirectTo不保留当前页面,在js使用
wx.switchTab不保留当前页面,跳转到tabBar页

二、讲解

1️⃣ navigate

<navigator  url=".路径">
    其它
</navigator>

2️⃣wx.navigateTo 

wx.navigateTo({
       url: '路径',
 })

3️⃣wx.redirectT

wx.redirectTo({
    url: '路径',
})

4️⃣wx.switchTab

wx.switchTab({
    url: '路径',
})

三、常用案例

navigateBack 省去写路径

  wx.navigateBack({
    delta: 1
  });

reLaunch 关闭所有页面,打开到应用内的某个页面

  wx.reLaunch({ 
    url: '/pages/index/index',
  })

四、总结

返回页面各有优点,按照自己需求使用。

补充:微信小程序如何返回上一个页面并刷新上一个页面

由于项目中经常碰到创建、删除后返回列表的场景,因此需要在返回后,页面及时反馈出操作后的结果列表,而不是旧数据列表

如何获取当前页面栈

var pages = getCurrentPages();
var beforePage = pages[pages.length - 2];
var currentPage = pages[pages.length - 1];

然后你就可以通过对象直接操作当前页面,比如调用函数。

创建

一般创建后,需要跳转到详情页面,然后详情页面返回又是列表页,这里举例说明如何返回列表页时有新创建的项目

var pages = getCurrentPages();
var beforePage = pages[pages.length - 2];
// 调用列表页的获取数据函数
beforePage.loadData();
// 跳转
wx.redirectTo({
    url: '/pages/info/info',
});

这里的跳转使用了 redirectTo,会关闭当前页面,所以我们在info页面点左上角返回时,会直接返回到列表页

建议在列表页的onLoad函数中,将数据请求单独放在一个函数中进行调用,比如这里的loadData,这样在create页面就能只刷新数据,而onLoad中可能存在的,比如获取用户id等操作,则不会重复再次执行

删除

var pages = getCurrentPages();
var beforePage = pages[pages.length - 2];
beforePage.loadData();
wx.navigateBack({
    delta: 1,
})

这里需要使用navigateBack返回上一级页面

总结

到此这篇关于微信小程序返回上一页的文章就介绍到这了,更多相关微信小程序返回上一页内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

微信小程序返回上一页的各种方法实例

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

微信小程序返回上一页的各种方法

微信小程序返回上一页的各种方法 1. navigator 这是最常见的一种跳转方式,相当于html里的a标签。但需要注意的是 该方法不能跳转tabbar页面,保留当前页面,在wxml使用 navigator url=".路径">内容/na
2023-08-19

微信小程序怎么实现返回上一页

这篇文章主要介绍了微信小程序怎么实现返回上一页的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇微信小程序怎么实现返回上一页文章都会有所收获,下面我们一起来看看吧。一、方法罗列函数说明navigator保留当前页面
2023-07-02

微信小程序阻止小程序返回的两种方法

这篇文章主要给大家介绍了关于微信小程序阻止小程序返回的两种方法,分别是通过wx.enableAlertBeforeUnload和page-container,两种方法都给出了详细的实例,需要的朋友可以参考下
2023-05-17

小程序带参返回上一页的方法有哪些

这篇文章主要介绍“小程序带参返回上一页的方法有哪些 ”,在日常操作中,相信很多人在小程序带参返回上一页的方法有哪些 问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”小程序带参返回上一页的方法有哪些 ”的疑惑有所
2023-06-26

uniapp微信小程序左上角返回按钮的监听方法

这篇文章主要介绍“uniapp微信小程序左上角返回按钮的监听方法”,在日常操作中,相信很多人在uniapp微信小程序左上角返回按钮的监听方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”uniapp微信小程序
2023-06-30

微信小程序picker选择器获取值的2种方法示例

picker为用户提供了多个选择,用户选了其中一种,但仍是需要有东西去告诉后台用户选了什么,下面这篇文章主要给大家介绍了关于微信小程序picker选择器获取值的2种方法,需要的朋友可以参考下
2023-03-02

编程热搜

目录