Vue-元素曝光(判断元素是否在可视区域内)（二）

• IntersectionObserver介绍
• intersection-observer npm包实际运用

目的：在列表中，用户上滑列表，列表中的元素可见时，记录此元素已曝光

安装

yarn add intersection-observer

引用

main.js
import 'intersection-observer'

运用

HTML

//列表界面，要求记录每个列表子元素的是否曝光
<div v-for="item in list">
	<div 
	data-type="task" 
   :data-item="item" 
   class="sa_point">
   </div>
</div>

js

<script>

export default {
data(){
	return {
		 hasObserveTaskCourse: new Set()
	}
},
 created() {
	this.initElementSensor()
 },
 methods:{
     initElementSensor() {
      this.$nextTick(() => {
        const obserRef = new IntersectionObserver((entries) => {
          entries.forEach((v) => {
            const { item, type, idx } = v.target.dataset
            const itemData = JSON.parse(item)
            if (this.hasObserveTaskCourse.has(itemData.id)) {
              obserRef.unobserve(v.target)
            } else if (v.isIntersecting) {
              this.hasObserveTaskCourse.add(itemData.id)
              switch (type) {
                case 'task':
                  '逻辑'
                  break
                case 'course':
                  '逻辑'
                  break
              }
            }
          })
        })
        setTimeout(() => {
          const items = document.querySelectorAll('.sa_point') || []
          items.forEach((item) => obserRef.observe(item))
        }, 0)
      })
    }
 }
}
</script>