uni生命周期

深藏阁楼爱情的钟 2022-12-16 06:14 35阅读 0赞

uni生命周期分为：**页面生命周期**和**应用生命周期**

**应用生命周期：**

**onLaunch：当uni-app初始化完成时触发(全局只触发一次)**

**onShow：当uni-app启动，或从后台进入前台显示**

**onHide：当uni-app从前台进入后台**

**onUniNViewMessage：对nvue页面发送的数据进行监听**

**页面生命周期：**

onLoad：监听页面加载，其参数为上个页面传递的数据，参数类型为Object

onShow：监听页面显示

onReady：监听页面初次渲染完成

onHide：监听页面隐藏

onUnload：监听页面卸载

onPullDownRefresh：监听用户下拉动作，一般用于下拉刷新

onReachBottom：页面上拉触底事件的处理函数

onShareAppMessage：用户点击右下角分享

<template>
        <view class="content">
            <image class="logo" src="../../static/image/myHover.png" @click="tap"></image>
            <view>
                <text class="title">{
       {title}}</text>
            </view>
        </view>
    </template>
    
    <script>
    
        // 跨终端解决方案:https://uniapp.dcloud.io/platform
        // 生命周期:https://uniapp.dcloud.io/frame?id=%E9%A1%B5%E9%9D%A2%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F
    
        export default {
            data() {
                return {
                    title: 'Hello'
                }
            },
            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();
            },
    
            // #ifdef APP-PLUS
            onNavigationBarButtonTap(){
    
            },
            // #endif
    
            methods: {
                tap(){
                    console.log('tap点击!');
                }
            }
        }
    </script>
    
    <style lang="scss">
        .content {
            text-align: center;
            height: 400upx;
        }
    
        .logo {
            height: 200upx;
            width: 200upx;
            margin-top: 200upx;
        }
    
        .title {
            font-size: 36upx;
            color: #8f8f94;
        }
    </style>