美文网首页
下拉加载

下拉加载

作者: 为了_理想 | 来源:发表于2021-09-02 15:10 被阅读0次
      notData: false,
                typeActive: 0,
                is_next: true,//用来判断是否可以继续下拉加载
    
     mounted() {
                //    window.addEventListener('scroll',this.handleScroll,true)
                window.addEventListener('scroll', this.load);
            },
    
            methods: {
    
                //滚动条在Y轴上的滚动距离
                getScrollTop() {
                    var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
                    if (document.body) {
                        bodyScrollTop = document.body.scrollTop;
                    }
                    if (document.documentElement) {
                        documentScrollTop = document.documentElement.scrollTop;
                    }
                    scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
                    return scrollTop;
                },
    
                //文档的总高度
                getScrollHeight() {
                    var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
                    if (document.body) {
                        bodyScrollHeight = document.body.scrollHeight;
                    }
                    if (document.documentElement) {
                        documentScrollHeight = document.documentElement.scrollHeight;
                    }
                    scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
                    return scrollHeight;
                },
    
                //浏览器视口的高度
                getWindowHeight() {
                    var windowHeight = 0;
                    if (document.compatMode == "CSS1Compat") {
                        windowHeight = document.documentElement.clientHeight;
                    } else {
                        windowHeight = document.body.clientHeight;
                    }
                    return windowHeight;
                },
    
                load() {
                  var that = this
                    var t = null
                    if (t === null) {
                            t = setTimeout(() => {
                                if (that.getScrollTop() + that.getWindowHeight() >= that.getScrollHeight() && Number(that.listArray.length) <= Number(that.list.total) && that.is_next) {
                                    that.is_next = false
                                    that.params.page++
                                    that.getData()
                                }
                                t = null
                            }, 30)
                        }
                },
                initData() {
                    var attrList = this.attrList
                    var supplyList = this.supplyList
                    var list = this.list.list
                    var fraction = []
                    var typeList = []
                    list.forEach((item) => {
                        item.isNote_c = false
                    })
                    var attrRender = attrList.filter((item, index) => {
                        if (item.field == 'weights' && item.title == '分数段') {
                            fraction.push(item)
                        }
                        if (item.field == 'type' && item.title == '类别') {
                            typeList.push(item)
                        }
                        return item.field !== 'weights' && item.title !== '分数段' && item.field !== 'type' && item.title !== '类别'
                    })
                    this.listArray = list
                    this.fractionArray = fraction
                    this.typeList = typeList
                    this.attrListArray = attrRender
                    this.supplyArrayList = supplyList
                },
    
                getData() {
                    var that = this
                    let url = '/Sanhuo/index'
                    var is_nextLoader = ''
                    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
                    axios.defaults.transformRequest = [function (data) {
                        let ret = ''
                        for (let it in data) {
                            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }]
                    axios.post(url, this.params, {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    }).then(function (res) {
                       that.is_next = res.data.list.length > 0 ? true : false
                        that.notData = res.data.list.length > 0 ? false : true
                        if (that.params.page == 1) {
                            that.listArray = res.data.list
                        } else {
                            if (!that.notData && that.is_next) {
                                that.listArray = that.listArray.concat(res.data.list)
                            }
                        }
                    })
                },
    

    相关文章

      网友评论

          本文标题:下拉加载

          本文链接:https://www.haomeiwen.com/subject/yusrgktx.html