Webpage-lifecycle NPM

webpage-lifecycle

介绍

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

安装教程

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方法所有事件监听