vue移动端图片曝光

2021-12-01 15:30:42 阅读：174 来源： 互联网

标签：dotDataArr vue maxNum observer self ._ entry 移动曝光

1.安装intersection-observer插件

npm install intersection-observer

2封装exposure类

import 'intersection-observer';
import { imgExposureApi } from '@/api/common'
//节流时间，默认是100ms
// IntersectionObserver.prototype['THROTTLE_TIMEOUT'] = 300;

export default class Exposure{
  dotDataArr=[];
  maxNum=0;
  _observer;//_observer可以理解未观察者的集合
  _timer;//定时器

//  初始化
  constructor(maxNum=20) {
    this.dotDataArr=[];
    this.maxNum = maxNum;
    this._timer =0;

    //全局只会实例化一次Exposure类，init方法只会执行一次
    this.init();
  }
  init(){
    const self = this;
    //init只会执行一次，边界处理方法放这里
    //把浏览器localStorage里面的剩余数据清空
    this.dotFromLocalStorage();
    //注册客户端webvies的关闭生命狗子函数
    this.beforeLeaveWebview();
    this._observer = new IntersectionObserver((function(entries,observer){
      entries.forEach(entry=>{
        //每个商品进入视窗都会触发
        if(entry.isIntersecting){
          //清楚当前定时器
          clearTimeout(self._timer);
          //获取元素信息
          //这个data-info设置的值，info可以随便设置
          const ctm = entry.target.attributes['data-info'].value;
          //收集的数据加到上报数组中
          self.dotDataArr.push(ctm);
          //收集到该商品后，取消对该商品dom的观察
          self._observer.unobserve(entry.target);
          //超过一定量打点，打点会删除这一批
          if(self.dotDataArr.length > self.maxNum){
            self.dot();
          }else{
            self.storeIntoLocalstorage(self.dotDataArr);
            if(self.dotDataArr.length>0){
              //只要有新的ctm添加进来，接下来如果没有增加，自动2s后打
              self._timer = window.setTimeout(function(){
                self.dot()
              },2000)
            }
          }
        }
      },{
        root:null,
        rootMargin:'0px',
        threshold: 0.5 // 不一定非得全部露出来  这个阈值可以小一点点
      })
    }))
  }
  //每个商品都会通过全局唯一的exposure的实例执行该add方法，蒋自己添加进观察者中
  add(entry){
    this._observer && this._observer.observe(entry.el)
  }
  dot(){
    //同时删除这批打点的ctms
    const dotDataArr = this.dotDataArr.splice(0,this.maxNum);
    imgExposureApi(dotDataArr.join(','));
    //打完后，顺便更新一下，localstorage
    this.storeIntoLocalstorage(this.dotDataArr);
  }
  storeIntoLocalstorage(dotDataArr){
    // 。。。 存进localStorage中，具体什么格式的字符串自行定义就好
    window.localStorage.setItem('dotDataArr',dotDataArr)
  }
  dotFromLocalStorage(){
    const ctmsStr  = window.localStorage.getItem('dotDataArr')
    if(ctmsStr ){
      //如果有数据，就上报打点
    }
  }
  beforeLeaveWebview(){
    let win= window;
    //自行跟客户端约定该狗子的实现就好
    // Vue.emit('webviewWillDisappear',()=>{
    //   if(this.dotDataArr.length>0){
    //     get(this.dotDataArr)
    //   }
    // })
  }

}

标签：dotDataArr,vue,maxNum,observer,self,._,entry,移动,曝光
来源： https://blog.csdn.net/qq_32496215/article/details/114372654

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue移动端图片曝光