欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue實(shí)現(xiàn)滾動(dòng)底部加載下一頁指令的示例代碼

 更新時(shí)間：2023年10月09日 15:20:27   作者：舊城夢(mèng)空  
vue中監(jiān)控滾動(dòng)事件可以直接在mounted中綁定滾動(dòng)事件,然后在銷毀前解綁滾動(dòng)事件,本文通過實(shí)例代碼介紹vue實(shí)現(xiàn)滾動(dòng)底部加載下一頁指令的過程,感興趣的朋友跟隨小編一起看看吧

vue中監(jiān)控滾動(dòng)事件可以直接在mounted中綁定滾動(dòng)事件，然后在銷毀前解綁滾動(dòng)事件，例如：

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

但是如果在項(xiàng)目中用的比較多的話，每個(gè)頁面都這樣寫就有點(diǎn)不合適了。那這個(gè)時(shí)候可以把滾動(dòng)事件自定義成指令

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//滾動(dòng)條的高度
        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)
  },
  //只有綁定不解綁的話，會(huì)出現(xiàn)在頁面加載的時(shí)候調(diào)用之前請(qǐng)求過的接口的情況，所以加上解綁比較好
  unbind(el) {
    window.removeEventListener('scroll',el.handler)
  }
})

到此這篇關(guān)于vue實(shí)現(xiàn)滾動(dòng)底部加載下一頁指令的文章就介紹到這了,更多相關(guān)vue滾動(dòng)底部加載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論