微信小程序判断页面是否从其他页面返回的实例代码


Posted in Javascript onJuly 03, 2019

微信小程序判断页面是否从其他页面返回,具体内容如下所示:

在 data 中自定义一个标记变量,在onLoad里

Page({
 data: {
  isNewOpen: true, //判断当前页面是新打开还是从其他页面返回 
  list: [], 
  page: 0
 },

 onLoad: function() { 
  this.getList()
 },
 
 getList () {
   // ...
 },
 
 goDetail (e) { 
  this.setData({
   isNewOpen: false
  })
  wx.navigateTo({
   url: `/pages/detail/detail`,
  }) 
 },
 
 onShow: function () {if (!this.data.isNewOpen) {
   this.setData({
    page: 2, // 页码
    isClose: true,
    list: []
   })
   this.getList()
  }
 },
})

ps:下面看下微信小程序 判断当前页面是重新打开,还是从其他页面返回

在小程序中设置变量用来判断是否是从其他页面返回

在 data 数据中声明一个变量 isClose, 默认为 true 。用来判断是正常打开,还是从其他页面返回。当点击跳转页面或者关闭小程序的时候,会触发 OnHide 函数,在此函数中将判断 isClose is true 的时候即为正常打开。当跳转页面时首先将 isClose 设置为 false, 这样 触发 OnHide 函数的时候,isClose is flase 并不会执行,进入跳转的页面,然后在由页面进行返回这是会触发跳转的页面的 OnUnload 函数 在此函数中 设置一个定时器 在 200ms 之后将 isClose 改为 true 这样当关闭小程序 再次进入的时候 isColse 依然为true 判断时是首次进入页面

实例

data:

data: {
  isClose:true   //判断当前页面是打开还是返回页
  }

跳转页面:

this.setData({ isClose:false})
  wx.navigateTo({
   url: '../index/index?',
  })

onUnload:

/**
  * 生命周期函数--监听页面卸载
  */
 onUnload: function () {
  var that =this
  setTimeout(function () {
   that.setData({ isClose: true })
  }, 200)

 },

onHide:

/**
  * 生命周期函数--监听页面隐藏
  */
 onHide: function () {
  if (this.data.isClose) {
   console.log('重新打开')
  }
 },

onShow:

/**
  * 生命周期函数--监听页面显示
  */
 onShow: function () {
  console.log(this.data.isClose)
  if (!this.data.isClose) {
   this.onLoad();
  }
 },

总结

以上所述是小编给大家介绍的微信小程序判断页面是否从其他页面返回的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JS简单实现文件上传实例代码(无需插件)
Nov 15 Javascript
node.js中的fs.lstat方法使用说明
Dec 16 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
Mar 03 Javascript
Javascript 高阶函数使用介绍
Jun 15 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 Javascript
AngularJS控制器之间的数据共享及通信详解
Aug 01 Javascript
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
JS实现统计字符串中字符出现个数及最大个数功能示例
Jun 04 Javascript
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
原生JS实现逼真的图片3D旋转效果详解
Feb 16 Javascript
Vue 构造选项 - 进阶使用说明
Aug 14 Javascript
Flexible.js可伸缩布局实现方法详解
Nov 13 Javascript
8 个有用的JS技巧(推荐)
Jul 03 #Javascript
vue swipe自定义组件实现轮播效果
Jul 03 #Javascript
20个必会的JavaScript面试题(小结)
Jul 02 #Javascript
微信小程序如何调用新闻接口实现列表循环
Jul 02 #Javascript
Angular.JS读取数据库数据调用完整实例
Jul 02 #Javascript
js实现for循环跳过undefined值示例
Jul 02 #Javascript
Vue的路由及路由钩子函数的实现
Jul 02 #Javascript
You might like
php 不使用js实现页面跳转
2014/02/11 PHP
destoon设置自定义搜索的方法
2014/06/21 PHP
smarty模板引擎从php中获取数据的方法
2015/01/22 PHP
php生成静态html页面的方法(2种方法)
2015/09/14 PHP
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
2013/07/31 Javascript
快速查找数组中的某个元素并返回下标示例
2013/09/03 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
2015/09/15 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
2015/10/09 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
2015/11/03 Javascript
jQuery使用cookie与json简单实现购物车功能
2016/04/15 Javascript
WEB开发之注册页面验证码倒计时代码的实现
2016/12/15 Javascript
详解nodejs异步I/O和事件循环
2017/06/07 NodeJs
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
JavaScript实现滑块验证解锁
2021/01/07 Javascript
[02:33]2018DOTA2亚洲邀请赛赛前采访——LGD
2018/04/04 DOTA
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
理论讲解python多进程并发编程
2018/02/09 Python
python实现二维插值的三维显示
2018/12/17 Python
解决Tensorboard 不显示计算图graph的问题
2020/02/15 Python
Python对称的二叉树多种思路实现方法
2020/02/28 Python
python tkinter之顶层菜单、弹出菜单实例
2020/03/04 Python
Python如何安装第三方模块
2020/05/28 Python
用python批量下载apk
2020/12/29 Python
HTML5中indexedDB 数据库的使用实例
2017/05/11 HTML / CSS
乌鸦喝水教学反思
2014/02/07 职场文书
在校大学生个人的自我评价
2014/02/13 职场文书
大学军训感言200字
2014/02/26 职场文书
交通事故赔偿协议书怎么写
2014/10/04 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
《学会看病》教学反思
2016/02/17 职场文书
Windows环境下实现批量执行Sql文件
2021/10/05 SQL Server
vue @ ~ 相对路径 路径别名设置方式
2022/06/05 Vue.js