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

用户10106350

发布于 2022-10-28 10:43:24

9030

发布于 2022-10-28 10:43:24

文章被收录于专栏：WflynnWeb

代码已上传至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)
},

监听页面离开事件

由于用户的离开和进入都会触发下面的这个事件，所以this.num在一次过程中都会加上2，所以用3、5、7、9来进行判断。

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
        }
    },
},

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2020-05-15，如有侵权请联系 cloudcommunity@tencent.com 删除

github