vue移动端监听切屏次数

十七行诗.

已于 2022-04-02 15:29:34 修改

阅读量1.8k

点赞数

于 2022-04-02 15:28:35 首次发布

本文链接：https://blog.csdn.net/dcl199728/article/details/123921388

版权

移动端切屏监听 visibilitychange 页面状态事件处理

关键词由CSDN通过智能技术生成

我们在做移动端的时候，有的项目中可能有需要防切屏的一个功能，pc端移动端都能监听到，话不多说，直接看代码


export default {
  data(){
    return{
      num:0, //切屏次数
    }
  },
  mounted(){
    //监听手机切屏
      document.addEventListener('visibilitychange',this.fn,true);
  },
  methods:{
    fn(){
      // 用户离开了当前页面
      if (document.visibilityState === 'hidden') {
        this.num++
      }else if (document.visibilityState === 'visible') {// 用户打开或回到页面
        console.log('用户打开或回到页面')
      }
    }
  },
  beforeDestroy(){
    document.removeEventListener('visibilitychange',this.fn,true) //销毁切屏监听事件
  }
}