当前位置:网站首页>uniapp-生命周期/路由跳转
uniapp-生命周期/路由跳转
2022-06-30 20:20:00 【智江鹏】
应用生命周期(仅可在App.vue中监听)
(1)onLaunch :当uni-app 初始化完成时触发(全局只触发一次)
App.vue里的onLaunch中option作用:获取用户进入小程序或退出小程序的场景值
(2)onShow :当 uni-app 启动,或从后台进入前台显示 //监听用户进入小程序
(3)onHide :当 uni-app 从前台进入后台 //监听用户离开小程序
(4)onError :当 uni-app 报错时触发
(5)onUniNViewMessage :对 nvue 页面发送的数据进行监听

页面生命周期(在页面中添加)
当页面中需要用到下拉刷新功能时,打开pages.json,在"globalStyle"里设置"enablePullDownRefresh":true,此时所有页面都可以完成下拉刷新功能
如果想单个页面不能执行刷新功能:在pages.json里单个页面上添加
(1)onLoad (监听页面加载)
(2)onShow (监听页面显示)
(3)onReady (监听页面初次渲染完成)
(4)onHide (监听页面隐藏)
(5)onUnload :监听页面卸载
(6)onResize :监听窗口尺寸变化
(7)onPullDownRefresh :监听用户下拉动作,一般用于下拉刷新
(8)onReachBottom :页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据
(9)onTabItemTap :点击 tabBar 时触发
(10)onShareAppMessage :用户点击右上角分享
(11)onPageScroll :监听页面滚动
(12)onNavigationBarButtonTap :监听原生标题栏按钮点击事件
(13)onBackPress :监听页面返回
(14)onNavigationBarSearchInputChanged :监听原生标题栏搜索输入框输入内容变化事件
(15)onNavigationBarSearchInputConfirmed :监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发
(16)onNavigationBarSearchInputClicked :监听原生标题栏搜索输入框点击事件
onLoad() {
console.log('页面加载')
},
onShow() {
console.log('页面显示')
},
onReady(){
console.log('页面初次显示')
},
onHide() {
console.log('页面隐藏')
},
onUnload() {
console.log('页面卸载')
},
onBackPress(){
console.log('页面返回...')
},
onShareAppMessage() {
console.log('分享!')
},
onReachBottom() {
console.log('下拉加载...')
},
onPageScroll(){
console.log('页面滚动...')
},
onPullDownRefresh() {
console.log('上拉刷新...')
uni.stopPullDownRefresh();
},
组件生命周期(与vue标准组件的生命周期相同)
(1)beforeCreate :在实例初始化之后被调用
(2)created :在实例创建完成后被立即调用
(3)beforeMount :在挂载开始之前被调用
(4)mounted :挂载到实例上去之后调用(该钩子在服务器端渲染期间不被调用),注意 mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,
可以在 mounted 内部使用vm.$nextTick:
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}
(5)beforeUpdate :数据更新时调用,发生在虚拟 DOM 打补丁之前(该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务端进行)
(6)updated :由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子(该钩子在服务器端渲染期间不被调用。)
(7)beforeDestroy :实例销毁之前调用。在这一步,实例仍然完全可用(该钩子在服务器端渲染期间不被调用。)
(8)destroyed :Vue 实例销毁后调用(该钩子在服务器端渲染期间不被调用。)
路由跳转
1.navigateTo(保留当前页面,跳转到其他页面,使用navigateTo可以返回上一页) uni.navigateTo({ url:'./straSettings' }); 2.reLaunch(关闭所有页面,跳转到其他页面) uni.reLaunch({ url:'./straSettings' }) 3.redirectTo(关闭当前页面,跳转到其他页面) uni.redirectTo({ url:'./straSettings' }) 4.switchTab(适用于底部导航栏之间的跳转,或者跳转到底部导航栏) uni.switchTab({ url: '../strategy/strategy' }); 5.location.href(适用于跳转到外部链接) location.href ='https://blog.csdn.net/weixin_50606255/article/details/118391274'; 6.注意 navigateTo, redirectTo 只能打开非 tabBar 页面。 switchTab 只能打开 tabBar 页面。 reLaunch 可以打开任意页面。 页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。 不能在 App.vue 里面进行页面跳转<navigator url="../hello/hello" open-type="navigate"> <view class="struct"> I am { {student.age}} yeas old </br> I have skills such as { {student.skill[0]}},{ {student.skill[1]}} </view> </navigator>
边栏推荐
- Huffman Tree (1) Basic Concept and C - language Implementation
- 第81场双周赛
- Peking University ACM problems 1005:i think I need a houseboat
- Jerry's touch key recognition process [chapter]
- What are database OLAP and OLTP? Same and different? Applicable scenarios
- obsidian配合hugo的使用,让markdown本地编辑软件与在线化无缝衔接
- B_QuRT_User_Guide(35)
- Go language identifier and package name specification
- Lumiprobe核酸定量丨QuDye dsDNA BR 检测试剂盒
- 1、生成对抗网络入门
猜你喜欢

好高的佣金,《新程序员》合伙人计划来袭,人人皆可参与

Web APIs 综合案例-Tab栏切换 丨黑马程序员

By analyzing more than 7million R & D needs, it is found that these eight programming languages are the most needed by the industry

Lvalue reference and lvalue reference

Solve the problems of Devops landing in complex environment with various tools with full stack and full function solutions
![Jerry's touch key recognition process [chapter]](/img/ec/25d2d6fd26571e4fb642129a4eee1b.png)
Jerry's touch key recognition process [chapter]

Implementation principle of PostgreSQL heap table storage engine
![翻转链表II[翻转链表3种方式+dummyHead/头插法/尾插法]](/img/a8/6472e2051a295f5e42a88d64199517.png)
翻转链表II[翻转链表3种方式+dummyHead/头插法/尾插法]
![Halcon knowledge: check the measurement objects [1]](/img/0a/3a12e281fcb201d8d11b25dac4145a.png)
Halcon knowledge: check the measurement objects [1]

Lumiprobe 改性三磷酸盐丨生物素-11-UTP研究
随机推荐
Go学习笔记
What bank card do you need to open an account online? In addition, is it safe to open an account online now?
Web host iptables firewall security script
MySQL:SQL概述及数据库系统介绍 | 黑马程序员
Lvalue reference and lvalue reference
Installation and use of securecrtportable
PM reports work like this, and the boss is willing to give you a raise
Openfire在使用MySQL数据库后的中文乱码问题解决
Lumiprobe protein quantitation - qudye Protein Quantitation Kit
判断js对象是否为空的方式
注册设备监理师难考吗,和监理工程师有什么关系?
1045 error occurred in MySQL login. Modification method [easy to understand]
北京大学ACM Problems 1004:Financial Management
数据库 OLAP、OLTP是什么?相同和不同?适用场景
Description of the latest RTSP address rules for Hikvision camera, NVR, streaming media server, playback and streaming [easy to understand]
亚马逊在阿拉伯联合酋长国限制LGBTQ相关的搜索和产品销售
Huffman tree (I) basic concept and C language implementation
Jenkins can't pull the latest jar package
Comparison between QT and other GUI Libraries
obsidian配合hugo的使用,让markdown本地编辑软件与在线化无缝衔接

