webpage-lifecycle

介绍

web页面常用的生命周期监听函数

安装教程

1. npm i webpage-lifecycle

使用说明

import lifecycle from 'webpage-lifecycle'


//监听页面显示
const listen = lifecycle.onShow(()=>{ .... })
// 移除监听
listen.remove()


//监听页面隐藏
const listen = lifecycle.onHide(()=>{ .... })
// 移除监听
listen.remove()

//一次性监听多个事件
const listen = lifecycle.on({
    hide() {
        console.log('hide do something...');
    },
    show() {
        console.log('show do something...');
    },
    ...
})
// 移除监听
listen.remove()

生命周期说明

| 函数 | 说明 | 返回值 | | -------------- | -------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | | onReady | 当纯 HTML 被完全加载以及解析时，此时css、js不一定都加载完成 | remove 方法 | | onLoad | 整个页面及所有依赖资源如样式表和图片都已完成加载时 | remove 方法 | | onLeave | 离开页面时，例如，刷新、当前窗口点击外链，关闭浏览器窗口、提交表单请求等 | remove 方法 | | onShow | 页面显示时，例如，从窗口最小化打开、回到当前标签页、后台回到前台、锁屏解锁时等 | remove 方法 | | onHide | 页面最小化时、设备锁屏时、切到后台时 | remove 方法 | | offLine | 设备断网时 | remove 方法 | | onLine | 设备有网时 | remove 方法 | | onKeyboardUp | 页面内输入框获取焦点，键盘弹出时键盘弹出时 | remove 方法 | | onKeyboardDown | 当点击输入框以外的其他页面区域，或者点击键盘自带的收起时键盘收起时 | remove 方法 | | onLandscape | 设备横屏时 | remove 方法 | | onPortrait | 设备竖屏时 | remove 方法 | | on | 监听多个事件，传入需要监听的事件object对象，支持ready, show, hide, leave, line, keyboardUp, keyboardDown, landscape, portrait, offLine | remove 方法，一次性移除通过on方法所有事件监听 |