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


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 相关文章推荐
浅析javascript闭包 实例分析
Dec 25 Javascript
JS动态获取当前时间,并写到特定的区域
May 03 Javascript
JS简单实现登陆验证附效果图
Nov 19 Javascript
常见的jQuery选择器汇总
Nov 24 Javascript
使用jQuery获取data-的自定义属性
Nov 10 Javascript
jQuery获取及设置表单input各种类型值的方法小结
May 24 Javascript
JavaScript事件详细讲解
Jun 27 Javascript
详解JS获取HTML DOM元素的8种方法
Jun 17 Javascript
解决JS外部文件中文注释出现乱码问题
Jul 09 Javascript
vue 实现数字滚动增加效果的实例代码
Jul 06 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
Apr 28 Javascript
js实现html滑动图片拼图验证
Jun 24 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
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
php中邮箱地址正则表达式实现与详解
2012/04/24 PHP
ThinkPHP实现ajax仿官网搜索功能实例
2014/12/02 PHP
PHP后台实现微信小程序登录
2018/08/03 PHP
php数组指针函数功能及用法示例
2020/02/11 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
javascript instanceof,typeof的区别
2010/03/24 Javascript
Jquery Ajax的Get方式时需要注意URL地方
2011/04/07 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
2013/07/31 Javascript
nodejs读取memcache示例分享
2014/01/02 NodeJs
使用百度地图api实现根据地址查询经纬度
2014/12/11 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
jquery实现鼠标悬浮停止轮播特效
2020/08/20 Javascript
jQuery获取字符串中出现最多的数
2016/02/22 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
2016/06/22 Javascript
AngularJs Forms详解及简单示例
2016/09/01 Javascript
AngularJS实现标签页的两种方式
2016/09/05 Javascript
基于Bootstrap表单验证功能
2017/11/17 Javascript
javascript刷新父页面方法汇总详解
2019/10/10 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
[原创]使用豆瓣提供的国内pypi源
2017/07/02 Python
Python 对输入的数字进行排序的方法
2018/06/23 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
详解python配置虚拟环境
2019/04/08 Python
python GUI库图形界面开发之PyQt5访问系统剪切板QClipboard类详细使用方法与实例
2020/02/27 Python
Python selenium模块实现定位过程解析
2020/07/09 Python
python 用Matplotlib作图中有多个Y轴
2020/11/28 Python
python中altair可视化库实例用法
2021/01/26 Python
CSS3弹性伸缩布局之box布局
2016/07/12 HTML / CSS
do you have any Best Practice for testing
2016/06/04 面试题
大学推普周活动总结
2015/05/07 职场文书
单位病假条范文
2015/08/17 职场文书
考研经验交流会策划书
2015/11/02 职场文书