uniapp -- 页面生命周期

这篇具有很好参考价值的文章主要介绍了uniapp -- 页面生命周期。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

除了 Vue 的生命周期之外,uniapp 也有一套自己的页面生命周期 😁,它们依然和 data 等方法同级

监听页面初始化

onInit(){}

监听页面的加载

它的参数是上个页面所传递的数据,参数类型是对象类型(用于页面之间的传参)

 onLoad (options) { }

监听页面的显示

页面每次出现在屏幕上都会触发,包括从下级页面点返回露出当前页面

onShow () {}

监听页面初次渲染完成

onReady () {}

监听页面的隐藏

onHide () {}

监听页面的卸载

onUnload() {}

监听窗口尺寸变化

仅支持:App、微信小程序、快手小程序

onResize () {}

监听用户下拉动作

这个相比起来是比较好玩的,因为你可以在用户做出下拉动作的同时做出一些交互,比如下拉刷新

onPullDownRefresh () {}

我们模拟一下下拉刷新:

people:[
					{
						name:'张山',
						id:101
					},
					{
						name:'李四',
						id:102
					},
					{
						name:'王五',
						id:103
					},
					{
						name:'王麻子',
						id:104
					},
					{
						name:'小瘪三',
						id:105
					}
				]

比如我们从服务器拿来这样一串用户信息,我们想要下拉刷新之后进行一个顺序的改变

		onPullDownRefresh () {
			setTimeout(()=>{
				this.people = [
					
						{
							name:'李四',
							id:102
						},
						{
							name:'小瘪三',
							id:105
						},
						{
							name:'王五',
							id:103
						},
						{
							name:'张山',
							id:101
						},
						{
							name:'王麻子',
							id:104
						}
				]
				uni.stopPullDownRefresh()
			},2000)
		}

我使用一个定时器模拟一下真实的请求事件,否则刷新会很快,我们几乎看不到任何效果数据的顺序就发生了改变

uni.stopPullDownRefresh()将停止页面的刷新动作

页面滚动到底部

onReachBottom () {}

这个函数官方也指明了,并不是将页面滚动到底部,而是用于下拉刷新的,我们打开浏览器一直向下滑动不就是下拉刷新吗? 😆

这个和下拉刷新是一样的用法,当然我们也可以去设置具体滚动到的位置 – 在页面的style节点中配置 onReachBottomDistance 就可以手动配置加载下一个页面所处的位置了

		{
			"path": "pages/list/list",
			"style": {
				"onReachBottomDistance": 300
			}
		}

其他函数

还有很多函数 比如:onTabItemTap() 点击 tab 时触发,不过都是有对应的应用场景的,并不是任何平台都适用,微信小程序居多 🤔

点击查看页面生命周期文章来源地址https://www.toymoban.com/news/detail-644148.html

到了这里,关于uniapp -- 页面生命周期的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序:uni-app页面Page和组件Component生命周期执行的先后顺序

    文档 页面生命周期 https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle 组件生命周期 https://uniapp.dcloud.net.cn/tutorial/page.html#componentlifecycle 经测试,得出结论: H5和微信小程序的生命周期函数调用顺序不一致 一般情况下,主要使用的周期函数如下,他们的执行顺序是固定的 页面 组件

    2024年02月08日
    浏览(54)
  • uniapp 微信小程序:页面+组件的生命周期顺序

    这个uniapp的微信小程序项目使用的是 VUE2 首页只提供了一个跳转按钮。 虽然文档中将页面与组件的生命周期分开罗列,但是我们在页面和组件中所有的生命周期函数都加上,看下效果: uniap 页面生命周期 uniapp 组件生命周期

    2024年02月15日
    浏览(39)
  • uniapp onLoad生命周期 uni.$on接受参数无法改变data数据解决办法

    问题阐述: 用以上写法来跨页面传参会发现在b页面,虽然能够接受到参数但是赋值到data时候没生效,虽然控制台能够打印出数据,但是页面上面并不会动态改变。用setTimeout包裹也没有用 如果想要用$emit和 $on来跨页面传参,只适合以下情况 如果想要实现a-b传值可以这样

    2024年02月10日
    浏览(44)
  • 【UniApp】-uni-app-项目实战页面布局(苹果计算器)

    经过前面的文章介绍,基本上 UniApp 的内容就介绍完毕了 那么从本文开始,我们就开始进行一个项目的实战 这次做的项目是苹果计算器,这个项目的难度不是很大,但是也不是很简单,适合练手 打开 HBuilderX,点击左上角 文件 - 新建 - 项目 : 项目创建完毕之后,首先来分析

    2024年02月04日
    浏览(63)
  • 【uni-app教程】四、UniAPP 路由配置及页面跳转

    uni-app 页面路由为框架统一管理,开发者需要在pages.json里配置每个路由页面的路径及页面样式。类似小程序在 app.json 中配置页面路由一样。所以 uni-app 的路由用法与 Vue Router 不同,如仍希望采用 Vue Router 方式管理路由,可在插件市场搜索 Vue-Router。 uni-app 有两种页面路由跳转

    2024年01月16日
    浏览(73)
  • uni-app--》uni-app的生命周期讲解

    🏍️作者简介:大家好,我是亦世凡华、渴望知识储备自己的一名在校大学生 🛵个人主页:亦世凡华、 🛺系列专栏:uni-app 🚲座右铭:人生亦可燃烧,亦可腐败,我愿燃烧,耗尽所有光芒。 👀引言         ⚓经过web前端的学习,相信大家对于前端开发有了一定深入的

    2023年04月18日
    浏览(51)
  • vue,小程序,uni-app的生命周期?

    Vue、小程序和Uni-App都有各自的生命周期,下面是它们的生命周期介绍: Vue 的生命周期 Vue 的生命周期分为创建、挂载、更新和销毁四个阶段,具体的生命周期函数如下: beforeCreate:实例刚在内存中被创建出来,此时还没有初始化好 data 和 methods 属性。 created:实例已经在内

    2024年01月25日
    浏览(51)
  • 【小程序 - 基础】页面导航、页面事件、生命周期、WXS脚本_04

    目录 一、页面导航 1. 什么是页面导航 2. 小程序中实现页面导航的两种方式 2.1 声明式导航  2.1.1 导航到 tabBar 页面  2.1.2 导航到非 tabBar 页面 2.1.3 后退导航 2.2 编程式导航 2.2.1 导航到 tabBar 页面 2.2.2 导航到非 tabBar 页面 2.2.3 后退导航  2.3. 导航传参 2.3.1 声明式导航传参

    2024年02月06日
    浏览(31)
  • 【uniapp】学习之【生命周期】

    uniapp生命周期 uni-app框架的生命周期分为两种 : 应用中的生命周期 和 页面内的生命周期 uni-app 应用生命周期 uni-app 页面生命周期

    2024年02月12日
    浏览(37)
  • uniapp生命周期

    Uniapp作为一款跨平台应用开发框架,具有丰富的生命周期,以下是Uniapp的生命周期: 1.应用生命周期 应用生命周期是指应用程序从启动到关闭的整个过程,包括应用程序的启动、前后台切换、退出等。Uniapp提供了以下生命周期钩子函数: onLaunch:应用程序启动时触发,仅在应

    2023年04月23日
    浏览(32)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包