javascript上拉加载数据，在vue.js中的实现?

Question

如何在javascript中实现上拉加载功能，以及如何在vue.js中实现scroll的监听？

在做上拉加载时， 需要面临几个问题

1. 如何监听scroll滚动条滚动的事件?
2. 如何判断scroll已经滚动到底部了?
3. 处理scroll的offset和documentElement的Height关系

Answer 1

有示例：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 || {},
            // 每一分页数据加载条数
            limit: opts.limit || 10,
            // 每一分页请求成功回调
            callbackFn: opts.callbackFn || function () {},
            // 所有分页数据加载完毕回调
            completeFn: opts.completeFn || function () {},
            // 无相关数据回调
            nodataFn: opts.nodataFn || function () {},
            // 网络错误回调
            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

Answer 2

刚好我前天写了一个简易的 你参考一下？
github

Answer 3

你忽略了一个问题，因为滚动不一定100%发生在window上面，有可能是发生在你某个div里面，如果是发生在div里面，那么你绑定scroll事件到window上面是不会生效的。

Answer 4

相关代码

// 监听滚动条
new Vue({
    beforeMount: function() {
        // 监听scroll事件
        window.addEventListener('scroll', this.handleScroll)
    },
    beforeDestroy () {
        window.removeEventListener('scroll', this.handleScroll)
    },
    data: {},
    mothods: {
        handleScroll: function() {
            // handle you scroll event
            
            // 最大的页面Y方向offset 加上 窗口的高度 等于 文档的高度
            // max(window.pageYOffset) + window.innerHeight === document.documentElement.scrollHeight
            
            if (window.pageYOffset + window.innerHeight >= document.documentElement.scrollHeight) {
               // 处理上拉加载事件 放在这里 
               // 获取服务端数据方法
               // 如果想使用预加载数据，即，即将滑动到底部时候就加载数据
               // window.pageYOffset + window.innerHeight >= document.documentElement.scrollHeight - 20
            }
        }
    }
})