当前位置: 首页 > news >正文

uniapp生命周期

uniapp生命周期

  • uniapp生命周期不同于vue生命周期,uniapp生命周期分为:

应用生命周期
页面生命周期
组件生命周期

应用生命周期(官网)

在这里插入图片描述

  • 注意
    应用生命周期仅可在App.vue中监听,在其它页面监听无效。
    onlaunch里进行页面跳转,如遇白屏报错,请参考onlaunch生命周期内navigateto跳转页面注意 - DCloud问答
    onPageNotFound 页面实际上已经打开了(比如通过分享卡片、小程序码)且发现页面不存在,才会触发,api 跳转不存在的页面不会触发(如 uni.navigateTo)

页面生命周期(官网)

在这里插入图片描述
在这里插入图片描述
onInit使用注意

  • 仅百度小程序基础库 3.260 以上支持 onInit 生命周期
  • 其他版本或平台可以同时使用 onLoad 生命周期进行兼容,注意避免重复执行相同逻辑
  • 不依赖页面传参的逻辑可以直接使用 created 生命周期替代

onReachBottom使用注意 可在pages.json里定义具体页面底部的触发距离onReachBottomDistance,比如设为50,那么滚动页面到距离底部50px时,就会触发onReachBottom事件。

如使用scroll-view导致页面没有滚动,则触底事件不会被触发。scroll-view滚动到底部的事件请参考scroll-view的文档

onPageScroll (监听滚动、滚动监听、滚动事件)参数说明:

属性类型说明
scrollTopNumber页面在垂直方向已滚动的距离(单位px)
注意
  • onPageScroll里不要写交互复杂的js,比如频繁修改页面。因为这个 生命周期是在渲染层触发的,在非h5端,js是在逻辑层执行的,两层之间通信是有损耗的。如果在滚动过程中,频发触发两层之间的数据交换,可能会造成卡顿。
  • 如果想实现滚动时标题栏透明渐变,在App和H5下,可在pages.json中配置titleNView下的type为transparent,参考。
  • 如果需要滚动吸顶固定某些元素,推荐使用css的粘性布局,参考插件市场。插件市场也有其他js实现的吸顶插件,但性能不佳,需要时可自行搜索。
  • 在App、微信小程序、H5中,也可以使用wxs监听滚动,参考;在app-nvue中,可以使用bindingx监听滚动,参考。
  • onBackPress上不可使用async,会导致无法阻止默认返回
onPageScroll : function(e) { //nvue暂不支持滚动监听,可用bindingx代替console.log("滚动距离为:" + e.scrollTop);
},

在这里插入图片描述

组件生命周期(官网)

在这里插入图片描述

http://www.lryc.cn/news/34935.html

相关文章:

  • 经典卷积模型回顾11—Xception实现图像分类(matlab)
  • 移动App性能测试包含哪些内容?App性能测试工具有哪些?
  • AI测试的迷思
  • [ 红队知识库 ] 一些常用bat文件集合
  • Qt广告机服务器(上位机)
  • SOA架构的理解
  • 如何选择一款数据库?
  • week2
  • JavaScript的学习
  • 用gin写简单的crud后端API接口
  • CF大陆斗C战士(三)
  • TTS | 语音合成论文概述
  • HTML第5天 HTML新标签与特性
  • java ee 之进程
  • Linux学习记录——십사 进程控制(1)
  • 使用 create-react-app 脚手架搭建React项目
  • inquirerjs
  • [数据库]内置函数
  • shell基本知识
  • Http长连接和短连接
  • [SQL Statements] 基本的SQL知识 之DDL针对表结构和表空间的基本操作
  • Git版本控制工具(详解)
  • 408考研计算机之计算机组成与设计——知识点及其做题经验篇目2:指令系统
  • Java语法中的方法引用::是个什么鬼?
  • 【使用vue init和vue create的区别以及搭建vue项目的教程】
  • 二、HTTP协议02
  • 免费Api接口汇总(亲测可用,可写项目)
  • 12.并发编程
  • C/C++指针与数组(一)
  • Android使用移动智能终端补充设备标识获取OAID