<script>
export default {
	mounted() {
		//我這里的事例監(jiān)聽的是window的滾動事件
		window.addEventListener('scroll', this.showbtn)
	},
	destroyed() {
    window.removeEventListener('scroll', this.showbtn)
  },
	methods:{
		showbtn() {
		//滾動事件的代碼
		}
	}
}
</script>

Vue.directive('scroll',{
  bind(el,binding) {
    let p = 0
    let t = 0
    let down = true
    let timer = null
    el.handler = () => {
      p =  window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
        if (t < p) {
          down = true
        } else {
          down = false
        }
        t = p
        let sign = 10
        let scrollHeight=document.documentElement.scrollHeight//滾動條的高度
        let clientHeight=document.documentElement.clientHeight//瀏覽器的可視高度
        const scrollDistance = scrollHeight -p -clientHeight
        if (scrollDistance < sign && down) {
          if (timer) clearTimeout(timer)
          timer = setTimeout(() => {
            binding.value()
          }, 300)
        }
    }
    setTimeout(() => {
      window.addEventListener('scroll',el.handler)
    },1000)
  },
  //只有綁定不解綁的話，會出現在頁面加載的時候調用之前請求過的接口的情況，所以加上解綁比較好
  unbind(el) {
    window.removeEventListener('scroll',el.handler)
  }
})