下拉加载

2021-09-02  本文已影响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)
                        }
                    }
                })
            },
上一篇下一篇

猜你喜欢

热点阅读