iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序返回上一页的各种方法实例
  • 644
分享到

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

2024-04-02 19:04:59 644人浏览 安东尼
摘要

目录一、方法罗列二、讲解三、常用案例四、总结补充:微信小程序如何返回上一个页面并刷新上一个页面总结返回上一页,一共有4中方法,每种方法都有不一样细节 一、方法罗列 函数说明navig

返回上一页,一共有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返回上一级页面

总结

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

--结束END--

本文标题: 微信小程序返回上一页的各种方法实例

本文链接: https://www.lsjlt.com/news/152028.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

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

下载Word文档
猜你喜欢
  • 微信小程序返回上一页的各种方法实例
    目录一、方法罗列二、讲解三、常用案例四、总结补充:微信小程序如何返回上一个页面并刷新上一个页面总结返回上一页,一共有4中方法,每种方法都有不一样细节 一、方法罗列 函数说明navig...
    99+
    2024-04-02
  • 微信小程序返回上一页的各种方法
    微信小程序返回上一页的各种方法 1. navigator 这是最常见的一种跳转方式,相当于html里的a标签。但需要注意的是 该方法不能跳转tabbar页面,保留当前页面,在wxml使用 内容 2. wx.navigateTo 通过构造js...
    99+
    2023-08-19
    微信小程序 javascript 小程序 前端
  • 微信小程序怎么实现返回上一页
    这篇文章主要介绍了微信小程序怎么实现返回上一页的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇微信小程序怎么实现返回上一页文章都会有所收获,下面我们一起来看看吧。一、方法罗列函数说明navigator保留当前页面...
    99+
    2023-07-02
  • 微信小程序阻止小程序返回的两种方法
    目录方法1:方法2:后语:对于page-container原理的个人理解总结本次项目为uniapp开发,原生小程序也可以参考这两个方法。 方法1: wx.enableAlertBef...
    99+
    2023-05-17
    阻止小程序返回怎么设置 微信小程序阻止返回 禁止小程序跳转
  • 小程序带参返回上一页的方法有哪些
    这篇文章主要介绍“小程序带参返回上一页的方法有哪些 ”,在日常操作中,相信很多人在小程序带参返回上一页的方法有哪些 问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”小程序带参返回上一页的方法有哪些 ”的疑惑有所...
    99+
    2023-06-26
  • 微信小程序页面返回传值的4种解决方案汇总
    目录使用场景解决方案1、使用globalData实现2、使用本地缓存Storage实现3、使用小程序的Page页面栈实现4、使用wx.navigateTo API的events实现总...
    99+
    2024-04-02
  • 微信小程序页面返回操作拦截
    返回操作包括三种情形,右滑手势、安卓物理返回键和调用 navigateBack 接口 微信小程序没有提供类似 onBackPress 监听页面返回的api,在某些特定场景下,业务收到了限制 为了解决这...
    99+
    2023-09-07
    微信小程序 小程序
  • uniapp微信小程序左上角返回按钮的监听方法
    这篇文章主要介绍“uniapp微信小程序左上角返回按钮的监听方法”,在日常操作中,相信很多人在uniapp微信小程序左上角返回按钮的监听方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”uniapp微信小程序...
    99+
    2023-06-30
  • 微信小程序如何禁止页面返回
    微信小程序禁止页面返回的案例:微信小程序中不允许用户返回上一页的操作代码。//用wx.redirectTo来做跳转页面wx.redirectTo({url: '/pages/index/index'})移动端小程序...
    99+
    2024-04-02
  • 微信小程序如何实现页面跳转与返回并回传数据的方法
    小编给大家分享一下微信小程序如何实现页面跳转与返回并回传数据的方法,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!微信小程序 详解页面跳转与返回并回传数据A页面:.wxml文件<vie...
    99+
    2024-04-02
  • 微信小程序阻止页面返回(包滑动、自动返回键)
    这个场景还是挺有意思的,比如某多多,只要你点左上角的返回 好家伙,满满又 花不了 的优惠券就来了,让你拥有一种消费最划算的感觉。 如果你的场景比较简单,只是对左上角的返回进行监听,只需要关闭自带的导航栏,手写导航栏或用ui库的写好的导航栏就...
    99+
    2023-09-12
    微信小程序 小程序 vue.js 前端 vue
  • 微信小程序返回某个页面怎么设置
    设置微信小程序返回某个页面的方法:回退上一级页面,代码示例:var pages = getCurrentPages(); //当前页面var beforePage = p...
    99+
    2024-04-02
  • 如何实现微信小程序页面返回顶部效果
    这篇文章主要为大家展示了“如何实现微信小程序页面返回顶部效果”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何实现微信小程序页面返回顶部效果”这篇文章吧。效果预...
    99+
    2024-04-02
  • 小程序js怎么返回上一个页面
    小程序中利用js返回上一个页面的方法使用navigateTo方法实现带参返回上一个页面;wx.navigateTo({url: '返回地址'})使用setData调用that.changeParentData()方...
    99+
    2024-04-02
  • 微信小程序之五种页面跳转方法小结
    目录第一种:<navigator></navigator>标签.第二种:wx.navigateTo.第三种:wx.redirectTo.第四种:wx.swit...
    99+
    2024-04-02
  • 微信小程序 操作完当前页面会,自动返回上一级页面,上一级页面自动刷新
    小程序页面有5个声明周期: 是由onLoad(页面加载)、onReady(页面初次渲染完成)、onShow(页面显示)、onUnload(页面卸载)   实现返回上一页的时候 其实是直接将隐藏的页面显示出来,所以不存在页面的再次加载 A页...
    99+
    2023-10-06
    微信小程序 小程序 前端 javascript
  • 微信小程序页面间传值的实现方法示例
    小程序页面间传值 大家晚上好,说晚上好是因为是在晚上写的,说这句话是因为这句话开篇不那么突然。那么小程序的页面间传值,在我使用这段时间里,我就非常的主观的把它们分为wx.navig...
    99+
    2024-04-02
  • 微信小程序中如何实现返回tabBar不刷新页面
    这篇文章主要介绍微信小程序中如何实现返回tabBar不刷新页面,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1、在一个项目中,遇到了这个场景:返回tabBar中的某个页面是需要保存数...
    99+
    2024-04-02
  • 小程序怎么设置返回上一级页面
    使用onShow加载实现小程序返回上一级页面并刷新首先,进入微信开发者工具,打开小程序文件目录;在文件目录中,依次查找:utils/app.json文件;app.json文件打开后,在文件中添加以下代码即可;onShow: function...
    99+
    2024-04-02
  • 微信小程序中如何使用wx.navigateTo返回到原页面
    这篇“微信小程序中如何使用wx.navigateTo返回到原页面”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“微信小程序中如何使用wx.navigateTo返回到原页面”,小编整理了以下知识点...
    99+
    2023-06-26
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作