vue监听用户离开页面并根据离开次数设置判断-可用于微信浏览器

超、凢脫俗 2023-03-13 11:49 5阅读 0赞

代码已上传至github  
github代码地址：https://github.com/Miofly/mio.git

动画效果的处理遇到的一个问题，当用户离开页面再回来时我会更换一张图片，同时给图片加上晃动的动画效果

但是如果animation直接写死，只会触发一次，当用户离开页面再回来时动画效果并不会再次触发。

此时只需要把相同的动画css复制一份，改一下动画名称，然后在页面离开事件中处理即可。下面为代码示例

<div v-if="!modalStatus" style="position: fixed;left: 0;top: 30%;text-align: center;width: 100%;"
    	 :style="{animation: animationStyle}">
    	<img style="width: 3.2rem;height: 1.68rem" :src="modal">
    </div>

mounted() {
        document.addEventListener('visibilitychange', this.handleVisiable)
    },

destroyed() {
        document.removeEventListener('visibilitychange', this.handleVisiable)
    },

监听页面离开事件

methods: {
        handleVisiable(e) { // 监听页面离开事件
            this.num = this.num + 1
            if (e.target.visibilityState === 'visible' && this.num == 3) { // 第一次离开
                this.modal = '../../img/qq/Tips2.png'
                this.animationStyle = 'shake2 2s linear 0s 1'
            }
            if (e.target.visibilityState === 'visible' && this.num == 5) { //
                this.modal = '../../img/qq/Tips3.png'
                this.animationStyle = 'shake 2s linear 0s 1'
            }
            if (e.target.visibilityState === 'visible' && this.num == 7) { //
                this.modalStatus = true
            }
        },
    },

发表评论取消回复

表情：

评论列表（有 0 条评论，5人围观）

还没有评论，来说两句吧...

相关阅读

相关 angular Js监听离开当前页面

使用 AngularJs-destroy事件（页面离开事件）在Controller中监听$destory事件，这个事件会在页面发生跳转的时候触发。 /

末蓝、/ 2023年05月31日 02:55/ 0 赞/ 15 阅读

相关 vue监听用户离开页面并根据离开次数设置判断-可用于微信浏览器

代码已上传至github github代码地址：https://github.com/Miofly/mio.git 动画效果的处理遇到的一个问题，当用户离开页面再回来时我

超、凢脫俗/ 2023年03月13日 11:49/ 0 赞/ 6 阅读

相关离开页面时触发的事件

beforeunload事件当浏览器窗口关闭或者刷新时，会触发beforeunload事件。当前页面不会直接关闭，可以点击确定按钮关闭或刷新，也可以取消关闭或刷新。

左手的ㄟ右手/ 2022年12月17日 12:55/ 0 赞/ 156 阅读

相关 js 离开当前页面提示

需求：当用户离开html 页面时，希望给用户弹出一个提示，以免丢失用户输入的信息。实现：使用了jquery 。 html 代码如下。 <!DOCTYP

野性酷女/ 2022年06月18日 00:21/ 0 赞/ 287 阅读

相关离开

终于要离开了，这个工作了六年的地方，自研究生毕业一直在这里，这是我的第一份工作，算是梦开始的地方吧。其实，在开始的开始，我曾倍感荣幸，作为工行的一份子，我也曾想能够在这里奋斗

叁歲伎倆/ 2022年06月16日 13:54/ 0 赞/ 206 阅读

相关 js 实现浏览器返回按钮返回页面并刷新页面微信可用

监听浏览器返回按钮，监听到以后执行来源重载微信可用 $(document).ready(function(e) { var cou

朱雀/ 2022年05月23日 01:16/ 0 赞/ 310 阅读

相关 vue 长按离开屏幕事件

vue长按事件touch 2018年02月02日 17:16:09 阅读数：3621 1.touch事件以下是四种touch事件 touchstart:

淩亂°似流年/ 2022年05月16日 13:35/ 0 赞/ 241 阅读

相关 6、用户加入房间、离开房间提示

![70][] app.js / 服务端 / / 1 将nodejs-websock包引进来 /

喜欢ヅ旅行/ 2022年05月16日 07:22/ 0 赞/ 212 阅读

相关 vue页面离开后执行函数

destroyed: function () { console.log("我已经离开了！"); this.stopTim

快来打我*/ 2022年04月16日 01:24/ 0 赞/ 403 阅读

相关 js实现用户关闭页面时提示是否离开此页面的方法

<script type="text/javascript"> window.onbeforeunload = function(){

﹏ヽ暗。殇╰゛Y/ 2021年09月27日 21:14/ 0 赞/ 374 阅读