节流方法的引入与使用(瀑布流的滚动事件控制案例)

节流方法 ===> 节流器

   //节流方法引入
   import {throttle} from 'throttle-debounce'
   data(){
     return {
   		//控制加载图标的显隐
       isActive: false
     }
   },
   mounted(){
   		//参数一:设定节流触发时间
       	//参数二:节流绑定事件
     this.a = throttle(1000,this.scroll.bind(this))
   		//事件监听绑定滚动事件触发节流
     window.addEventListener('scroll',this.a)
   },
   destroyed(){
       	//在组件销毁时清除监听
       window.removeEventListener('scroll',this.a)
   },
   methods:{
   		//设定事件
     scroll(){
         if (this.isActive == true) {
           return
         }
      		*//获取距下距离,如果小于它的可视距离,就执行内部代码*
   		//组件内部方法getBoundingClientRect().bottom用于获取该组件距下距离
           //document.documentElement.clientHeight用于获取屏幕高度
      if (this.$refs.waterfall.getBoundingClientRect().bottom < document.documentElement.clientHeight) {
   ​    this.isActive = true
   		//子传父 设定自定义事件
   ​    this.$emit('isActive')
      }
     }
    }