• uni-app 生命周期


    生命周期分为:页面生命周期和应用生命周期

     

    生命周期可参考:uni-app官方API

     

    注意平台支持,仅某个平台支持会显示,5+App是超HTML5+的App方案.

     

    例如分享:只有小程序支持.这时我们就要采用跨终端解决方案:https://uniapp.dcloud.io/platform

     

     

    1.应用生命周期

    2.页面生命周期

     

     

     

     

     1 <template>
     2     <view class="content">
     3         <image class="logo" src="../../static/image/myHover.png" @click="tap"></image>
     4         <view>
     5             <text class="title">{{title}}</text>
     6         </view>
     7     </view>
     8 </template>
     9 
    10 <script>
    11     
    12     // 跨终端解决方案:https://uniapp.dcloud.io/platform
    13     // 生命周期:https://uniapp.dcloud.io/frame?id=%E9%A1%B5%E9%9D%A2%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F
    14     
    15     export default {
    16         data() {
    17             return {
    18                 title: 'Hello'
    19             }
    20         },
    21         onLoad() {
    22             console.log('页面加载')
    23         },
    24         onShow() {
    25             console.log('页面显示')
    26         },
    27         onReady(){
    28             console.log('页面初次显示')
    29         },
    30         onHide() {
    31             console.log('页面隐藏')
    32         },
    33         onUnload() {
    34             console.log('页面卸载')
    35         },
    36         onBackPress(){
    37             console.log('页面返回...')
    38         },
    39         onShareAppMessage() {
    40             console.log('分享!')
    41         },
    42         onReachBottom() {
    43             console.log('下拉加载...')
    44         },
    45         onPageScroll(){
    46             console.log('页面滚动...')
    47         },
    48         onPullDownRefresh() {
    49             console.log('上拉刷新...')
    50             uni.stopPullDownRefresh();
    51         },
    52         
    53         // #ifdef APP-PLUS
    54         onNavigationBarButtonTap(){
    55             
    56         },
    57         // #endif
    58         
    59         methods: {
    60             tap(){
    61                 console.log('tap点击!');
    62             }
    63         }
    64     }
    65 </script>
    66 
    67 <style lang="scss">
    68     .content {
    69         text-align: center;
    70         height: 400upx;
    71     }
    72 
    73     .logo {
    74         height: 200upx;
    75         width: 200upx;
    76         margin-top: 200upx;
    77     }
    78 
    79     .title {
    80         font-size: 36upx;
    81         color: #8f8f94;
    82     }
    83 </style>

     

    页面栈以何种方式进入或退出以及tabbar的路由切换触发页面生命周期的行为.

     

     

     

     

  • 相关阅读:
    python的IDE(pycharm)安装以及简单配置
    python环境搭建(python2和python3共存)
    如何搭建samba服务?
    css 样式 文字过长 换行处理方法
    my97 日历控件
    myeclipse8.6 注册码
    (46) odoo核心文档分享
    (01-02) odoo8.0_Ubuntu14.04_nginx反代理设置
    (45) Manifest文件
    (44) odoo中的WebService
  • 原文地址:https://www.cnblogs.com/cisum/p/10011103.html
走看看 - 开发者的网上家园