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

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

在 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();
  }
 },

总结

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

赞 (0)

相关推荐

  • 微信小程序之分享页面如何返回首页的示例

    微信小程序之分享页面如何返回首页的示例

    做小程序开发发现,页面分享出去后,用户通过分享进去的页面很难找到返首页的情况.(微信官方操作是点击右上角三个点,在手机下方显示返回首页).民间很多方案是自己在页面加个悬浮Home标注. 今天我分享另外一种方法.请看下面.gif; 有没有发现,左上角有返回按钮了.原理简单,在你要分享的页面,分享配置时配置你的首页,并带上对应的参数,在首页 onLoad方法中可以获取.代码如下: <!--index.wxml--> <view class="container">

  • 6行代码实现微信小程序页面返回顶部效果

    6行代码实现微信小程序页面返回顶部效果

    本文实例为大家分享了微信小程序页面返回顶部的具体代码,供大家参考,具体内容如下 效果预览: js部分: Page({ data: { topNum: 0 }, returnTop: function () { this.setData({ topNum: this.data.topNum = 0 }); } }) wxml部分: <scroll-view scroll-y scroll-with-animation='true' scroll-top='{{ topNum }}'> <v

  • 微信小程序返回多级页面的实现方法

    微信小程序返回多级页面的实现方法 微信小程序开发中,返回上一页是很普遍的操作,最常见的是点击手机的返回键和点击自定义的按钮返回上一页这两种情况.点击手机的返回键我们不需要做处理,如果是自定义按钮实现返回效果,就要调用微信提供的API: wx.navigateBack(OBJECT) 也可以通过 wx.navigateBack 方法实现返回多级页面,只要设置 delta 的值就可以: //在C页面内 navigateBack,将返回A页面,delta = 1 时与 wx.navigateBack(

  • 微信小程序 详解页面跳转与返回并回传数据

    微信小程序 详解页面跳转与返回并回传数据 A页面: .wxml文件 <view class="flex-wrp"> <text style="width: 32%;">选择城市</text> <input style="width: 68%;" type="text" bindtap="city" placeholder="请选择城市" valu

  • 微信小程序使用form表单获取输入框数据的实例代码

    微信小程序使用form表单获取输入框数据的实例代码

    本文讲述了微信小程序使用form表单获取输入框数据的实例代码.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml 用户名: 密码: 登录 重置 {{tip}}{{userName}}{{psw}} index.js Page({ data:{ // text:"这是一个页面" tip:'', userName:'', psw:'' }, formBindsubmit:function(e){ if(e.detail.value.userName.leng

  • 微信小程序之批量上传并压缩图片的实例代码

    具体内容如下所示: 首先,要在.wxml文件里面创建一个canvas,作用是承载压缩的图片,以供上传的时候获取 这个canvas不能隐藏,否则没效果,可以将其移至屏幕外. <canvas canvas-id='attendCanvasId' class='myCanvas'></canvas> 然后呢,就是.js文件里面的方法了 // 点击加_压缩 takePhoto: function () { var that = this; let imgViewList = that.da

  • 微信小程序获取位置展示地图并标注信息的实例代码

    1.map组件的高度如果想要铺满屏幕,要是使用height:100vh样式 2.获取位置要在app.json中标明权限 3.先使用wx.getLocation获取自己的位置,然后再回调中使用setData方法,赋予数据给前台页面展示标注点 index.js //index.js //获取应用实例 const app = getApp() Page({ data: { }, onLoad: function () { var self=this; this.mapCtx = wx.createMa

  • 微信小程序中实现一对多发消息详解及实例代码

    微信小程序中实现一对多发消息详解及实例代码 微信小程序中各个界面之间的传值和通知比较蛋疼.所以模仿了iOS中的通知中心,在微信小程序中写了一套类似的通知中心. 通知中心可以做到:1对多发消息,传递object.使用十分简洁. 使用时,在需要接收消息的界面注册一个通知名.然后在需要发消息的界面post这个通知名就可以了.可以在多个界面注册同一个通知名.这样就可以1对多发消息. 使用方法: 1:在app.js中引用notification.js var notificationCenter = re

  • 微信小程序methods中定义的方法互相调用的实例代码

    当调用test2时: methods = { test(age){ console.log('test', age); }, test2(){ console.log(this.methods); this.methods.test('222'); console.log('test2') } }; 结果: {test: f, test2: f} test 222 test2 总结 以上所述是小编给大家介绍的微信小程序methods中定义的方法互相调用的实例代码,希望对大家有所帮助,如果大家有任

  • 微信小程序仿抖音短视频切换效果的实例代码

    一直以为抖音短视频切换假如用小程序做的话应该是比较简单的,直接用swiper实现就好,但在实际写的过程中才发现没那么简单,要控制的逻辑还是挺多的. 还是先看效果 体验路径 自定义组件系列>>仿抖音短视频切换 代码逻辑 直接调用自定义的swiper组件就好 调用代码 js const videoList = [] Page({ data: { videoList, activeId:2, isPlaying:true }, onLoad() { var that = this wx.getSys

  • 微信小程序中插入激励视频广告并获取收益(实例代码)

    最近微信小程序后台发送通知,小程序激励式视频广告组件日前已全量上线,也就是说大家可以在小程序中插入激励视频广告了,之前只允许小游戏可以使用 . 激励式视频广告 用户在小程序中主动触发激励式广告,并达成奖励下发标准(完整播放视频广告,并手动点击 "关闭广告" 按钮),将获得该小程序下发的奖励.广告触发场景与奖励内容均由流量主自定义. 新建广告位 首先进入小程序后台点击流量主,点击广告位管理,点击新建广告位,就可以新建所需要的广告了,目前有三种 banner,激励视频,插屏广告. 插入广告

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

    微信小程序判断页面是否从其他页面返回,具体内容如下所示: 在 data 中自定义一个标记变量,在onLoad里 Page({ data: { isNewOpen: true, //判断当前页面是新打开还是从其他页面返回 list: [], page: 0 }, onLoad: function() { this.getList() }, getList () { // ... }, goDetail (e) { this.setData({ isNewOpen: false }) wx.navi

  • 微信小程序判断手机号是否合法的实例代码

    微信小程序判断手机号是否合法的实例代码

    目录 场景 效果 代码 总结 场景 在注册页面输入手机号,在请求注册接口前先行判别输入的手机号码是否合法: 效果 代码 导入 vant-weapp 组件:user-register.json { "usingComponents": { "van-cell-group": "@vant/weapp/cell-group/index", "van-field": "@vant/weapp/field/index&quo

  • 微信小程序和公众号实现签到页面

    微信小程序和公众号实现签到页面

    本文实例为大家分享了微信小程序和公众号实现签到页面的具体代码,供大家参考,具体内容如下 微信小程序 之前做了一个酒庄的小程序签到,微信小程序和公众号一起的. wxml: <!--pages/Calendar/Calendar.wxml--> <!-- 打卡日历页面 --> <view class='all'>  <view class="bar">   <!-- 上一个月 -->   <view class="

随机推荐