相關(guān)代碼

// 監(jiān)聽(tīng)滾動(dòng)條
new Vue({
    beforeMount: function() {
        // 監(jiān)聽(tīng)scroll事件
        window.addEventListener('scroll', this.handleScroll)
    },
    beforeDestroy () {
        window.removeEventListener('scroll', this.handleScroll)
    },
    data: {},
    mothods: {
        handleScroll: function() {
            // handle you scroll event
            
            // 最大的頁(yè)面Y方向offset 加上 窗口的高度 等于 文檔的高度
            // max(window.pageYOffset) + window.innerHeight === document.documentElement.scrollHeight
            
            if (window.pageYOffset + window.innerHeight >= document.documentElement.scrollHeight) {
               // 處理上拉加載事件 放在這里 
               // 獲取服務(wù)端數(shù)據(jù)方法
               // 如果想使用預(yù)加載數(shù)據(jù)，即，即將滑動(dòng)到底部時(shí)候就加載數(shù)據(jù)
               // window.pageYOffset + window.innerHeight >= document.documentElement.scrollHeight - 20
            }
        }
    }
})

你忽略了一個(gè)問(wèn)題，因?yàn)闈L動(dòng)不一定100%發(fā)生在window上面，有可能是發(fā)生在你某個(gè)div里面，如果是發(fā)生在div里面，那么你綁定scroll事件到window上面是不會(huì)生效的。

剛好我前天寫了一個(gè)簡(jiǎn)易的 你參考一下？
github

有示例：https://github.com/sunmengyua...

import Request from './request'

const Loadmore = {
    flag: true,
    view: null,
    opts: null,
    do: function (view, opts) {
        this.flag = true
        this.view = view
        this.view._Loadmore = view._Loadmore || {}
        this.opts = {
            url: opts.url,
            status: opts.status || 'init',
            params: opts.params || {},
            // 每一分頁(yè)數(shù)據(jù)加載條數(shù)
            limit: opts.limit || 10,
            // 每一分頁(yè)請(qǐng)求成功回調(diào)
            callbackFn: opts.callbackFn || function () {},
            // 所有分頁(yè)數(shù)據(jù)加載完畢回調(diào)
            completeFn: opts.completeFn || function () {},
            // 無(wú)相關(guān)數(shù)據(jù)回調(diào)
            nodataFn: opts.nodataFn || function () {},
            // 網(wǎng)絡(luò)錯(cuò)誤回調(diào)
            errorFn: opts.errorFn || function () {}
        }
        if (this.opts.status === 'init') this.loadData()
        var type = opts.type || 'scroll'
        if (type === 'scroll') this.listenScroll()
    },
    loadData: function () {
        var view = this.view
        var opts = this.opts
        var status = {
            page: view._Loadmore.page || 0,
            offset: view._Loadmore.offset || 0,
            flag: (view._Loadmore.flag !== undefined)
                ? view._Loadmore.flag
                : true,
            destroyed: (view._Loadmore.destroyed !== undefined)
                ? view._Loadmore.destroyed
                : false
        }
        if (!this.flag) return
        this.flag = false
        if (status.flag && !status.destroyed) {
            Request({
                url: opts.url,
                params: {
                    ...opts.params,
                    page: status.page,
                    offset: status.offset,
                    limit: opts.limit
                }
            }).then((data) => {
                var list = data.data.list
                opts.callbackFn(list, data.data.page)
                view._Loadmore.page = status.page + 1
                view._Loadmore.offset = status.offset + opts.limit
                if ((list instanceof Array) && (list.length < opts.limit) && (list.length > 0)) {
                    view._Loadmore.flag = false
                    opts.completeFn({
                        page: status.page,
                        offset: status.offset,
                        list: list
                    })
                }
                if ((list === null) || !list.length) {
                    view._Loadmore.flag = false
                    if ((status.page === 0) || (status.offset === 0)) {
                        opts.nodataFn({
                            page: status.page,
                            offset: status.offset
                        })
                    }
                    opts.completeFn({
                        page: status.page,
                        offset: status.offset,
                        list: list
                    })
                }
                this.flag = true
            }).catch(() => {
                opts.errorFn({
                    page: status.page,
                    offset: status.offset
                })
                this.flag = true
            })
        }
    },
    clear: function () {
        this.view._Loadmore = {
            flag: true,
            page: 0,
            offset: 0
        }
    },
    listenScroll: function () {
        var t = null
        var pos = 0
        window.addEventListener('scroll', () => {
            if (t === null) {
                t = setTimeout(() => {
                    if (this.view._Loadmore.destroyed) return
                    var scrollY = window.scrollY
                    var scrollHeight = document.body.scrollHeight
                    var screenHeight = window.screen.availHeight
                    if (scrollY > pos) {
                        if (scrollHeight - scrollY < screenHeight + 20) this.loadData()
                    }
                    pos = scrollY
                    t = null
                }, 16)
            }
        })
    }
}

export default Loadmore