這幾天在做商城首頁的商品列表，商品卡片的數(shù)量很多，如果一次性加載那么多，加載較慢，而且用戶體驗不好。所以使用鼠標無限滾動加載效果更好。 實現(xiàn)滾動加載的方式有很多，有現(xiàn)成的組件 InfiniteScroll，但是一些非主流瀏覽器無法觸發(fā)，還是自己動手寫一寫吧。

實現(xiàn)滾動加載的核心：滾動條高度 + 瀏覽器窗口高度 >= 內(nèi)容高度 - 閾值

• document.body.scrollTop 滾動條滾動的距離 （這個有兼容性問題，兼容性寫法）
  let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
• window.innerHeight 瀏覽器窗口高度
• document.body.scrollHeight 內(nèi)容高度 (兼容性寫法)
  let bodyHeight = document.body.scrollHeight || document.documentElement.scrollHeight;

自定義指令 v-scroll

directives: {/*** 滾動加載的自定義指令*/scroll: {bind(el, binding, vnode) {window.addEventListener('scroll', vnode.context.scrollLoad)},unbind(el, binding, vnode) {window.removeEventListener('scroll', vnode.context.scrollLoad)}} }, methods: {scrollLoad() {//滾動條高度（頁面被卷去高度）let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;//文檔高度let bodyHeight = document.body.scrollHeight || document.documentElement.scrollHeight;// 滾動條高度 + 瀏覽器高度 >= 文檔高度 - 閾值if (scrollTop + window.innerHeight >= bodyHeight - 300) {// 判斷請求發(fā)送標志位，避免重復(fù)請求if (this.loading) return;// 加載的頁碼和每次滾動加載的數(shù)量，中data中聲明if (this.listIndex * this.PageQty >= this.total) return;this.listIndex++// 獲取商品數(shù)據(jù)的異步操作this.getProductList(this.listIndex)}} } 復(fù)制代碼

這里需要注意：

因為發(fā)送請求和滾動事件的方法定義在了組件的 methods中，需要拿到Vue實例，但在自定義指令里，不能通過 this 拿到Vue實例，而是通過指令鉤子函數(shù)的第三個參數(shù) vnode 的 context 屬性拿

必須要在unbind鉤子中解綁滾動加載事件，否則在其他頁面也會被觸發(fā)。

使用時，因為基于文檔高度和滾動條高度，綁在哪里無所謂。

<template><div id="index" v-scroll><ul><li v-for="(item, index) in productList" :key="index"></li></ul></div> </template> 復(fù)制代碼

轉(zhuǎn)載于:https://juejin.im/post/5d0b56b1e51d45775f516a74

總結(jié)

以上是生活随笔為你收集整理的Vue踩坑之旅（四）—— 自定义指令实现滚动加载的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。