微信小程序组件生命周期 小程序应用生命周期

   2023-02-09 学习力0
核心提示:1.A页面点击跳转到B页面,在B页面操作后A页面应该发生变化,但是实际上我们点击返回的时候我们发现并没有刷新,通过小程序的生命周期函数由onLoad(页面加载)、onReady(页面初次渲染完成)、onShow(页面显示)、onHide(页面隐藏)、onUnload(页面卸载)
1.A页面点击跳转到B页面,在B页面操作后A页面应该发生变化,但是实际上我们点击返回的时候我们发现并没有刷新,通过小程序的生命周期函数由onLoad(页面加载)、onReady(页面初次渲染完成)、onShow(页面显示)、onHide(页面隐藏)、onUnload(页面卸载)五个周期构成。

问题:如果在onShow中执行this.onLoad(),会导致页面第一次加载的时候数组加载两次!

原因:页面加载先执行onLoad,再执行的onShow,就会出现在onLoad加载一次数据,在onShow中执行this.onLoad()在加载一次数据。

解决方案:将不需要刷新的数据放在onLoad中执行,将需要刷新的数据放在onShow中执行!

2.对于组件的生命周期没有onLoad()、onShow()生命周期的页面,怎么对带有组件页面的进行页面刷新操作?

点击A页面(带有组件),进入B页面,在B页面操作完成后,同样回退到A页面时,我们对A页面的数据进行刷新操作。

组件:

HTML:

<custom-component>
 
 <view wx:for="{{list}}"> {{item}} </view>
 
</custom-component>

JS:

Component({
    data: {
      list: []
    },
    ready: function() {
      this.getData();
      console.log('ready')
    },
 
    methods: {
      getData() {
        console.log("刷新数据")
        var num = Math.floor(Math.random() * 10 + 1);
        this.setData({
          list: num
        })
      }
    }
  })

  

 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • 小程序上传wx.uploadFile - 小程序请假-请求
    小程序上传wx.uploadFile - 小程序请假-请求
    小程序上传wx.uploadFileUploadTask wx.uploadFile(Object object)将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求,其中 content-type 为 multipart/form-data。使用前请注意阅读相关说明。num=1;当num==3时,设置按钮隐藏直接上代码:view class='
    03-08
  • 微信小程序中overflow:scroll失效的问题 微信小程序overflow设置滚动
    微信小程序中overflow:scroll失效的问题 微信小
    .common-pop-table {padding: 0 30rpx;overflow: scroll;max-height: 70%;}研究后发现,要实际的设置对应的那个维度的高度,wcss改成.common-pop-table {padding: 0 30rpx;overflow: scroll;max-height: 400px;}就恢复正常了
    03-08
  • 小程序 AI/AR 能力
    一、关于 VisionKit1、定义VisionKit 为小程序提供了开发 AR 功能的能力,包含了 AR 在内的视觉算法。2、版本提供了 V1 和 V2 两个版本,区别如下:V1平面接口,适用于用户在平面场景下,例如桌面,地面,泛平面场景,放置虚拟物体,不提供真实世界距离。用户
    03-08
  • Python小程序——快排算法 快排 python
    1 def Partition(list,p,q): 2 #这里是用来分块的算法。 3 x = list[p] 4 i = p 5 for j in range(p+1,q+1): #注意range是顾前不顾后的,所以后面的区间值要大一位 6 if list[j]x: 7 i+=1 8 list[i],list[j] = list[j],list[i] 9 10 list[p], list[i] = list[
    02-09
  • 总结一些 egret项目接小程序时 遇到的问题及解决方法
    总结一些 egret项目接小程序时 遇到的问题及解
    1,https://blog.csdn.net/u013052238/article/details/81456908  这个地址的一些问题 是一部分,其中 第6条,当在wxgame.ts中仿照已有的 暴露库给window的方法写完之后,仍会报错,本人遇到的是 : jszip is not defined :  也尝试过其他前辈分享的解决方
    02-09
  • c++第一个小程序 第一个小程序是什么
     #include iostreamusing namespace std;int main(){const int SIZE=50;//定义大小。char name[SIZE]; cout"please input you name!\n"; //提示cinname;//输入cout"hello world:"nameendl; //输出return 0;}   #include iostreamusing namespace std;int m
    02-09
  • 微信小程序 错误记录
    1、报错this.getUserInfo(this.setData) is not a function;at pages/index/index onShow function;at api request success callback functionTypeError: this.getUserInfo is not a function在回调结果里调用这个页面的函数 this.fun() 或者 this.setData 时
    02-09
  • 【小程序】添加tabBar后navigateTo失效
    某页面.js//事件处理函数bindViewTap() {wx.navigateTo({url: '../logs/logs',})}, app.json"tabBar": {"backgroundColor": "black","color":"white","list": [{"pagePath": "pages/index/inde
    02-09
  • 微信小程序npm引入vant-weapp库的方法
    微信小程序npm引入vant-weapp库的方法
    1、终端打开小程序所在目录  2、npm init初始化,初始化完成之后,小程序项目中就会出现package.json文件,说明已经初始化成功 3、npm install --production 安装生产环境,不要npm install都给装上,以免小程序包过大  4、安装vant :npm i vant-weapp
    02-09
  • 小程序组件之间的通信 小程序子父子组件通信
    前言:其实之前就想写这个的,因为我觉得这么模块化的框架,组件之间通信是非常重要的,也是最经常用到的一块儿,只是之前在项目里一直没用到跨组件通信,现在用到了,也会用了,就一起写出来得了 :) 一、父、子组件之间的通信注:首先我们先将子组件在父组
    02-09
点击排行