js滚动加载更多pageIndex+1

33 阅读1分钟

1.mounted 下监听

    mounted() {
            this.typeId = this.getQueryVariable("typeId") || ''
            this.keyword = decodeURI(this.getQueryVariable("keyword") || '')
            this.initSearchapi()
            // 监听滚动
            window.onscroll = () => {
                //文档内容实际高度(包括超出视窗的溢出部分)
                var scrollHeight = Math.max(document.documentElement.scrollHeight, document.body
                    .scrollHeight);
                //滚动条滚动距离
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body
                    .scrollTop;
                //窗口可视范围高度
                var clientHeight = window.innerHeight || Math.min(document.documentElement.clientHeight,
                    document.body.clientHeight);

                if (clientHeight + scrollTop >= scrollHeight) {
                    this.pageIndex++
                    this.initSearchapi(1)
                }
            }



        },
  1. 当参数为1 合并数组
   initSearchapi(boolean) {
                let data = {
                    typeId: this.keyword ? '' : this.typeId,
                    keyword: this.keyword,
                    pageIndex: this.pageIndex,
                }
                if (this.keyword != this.keyword.replace(/[^\u4E00-\u9FA5]/g, '')) {
                    alert("只能是中文");
                    return false
                }
                $.get({
                    url: "/Handler/Cooperation/Dream/DreamSearchList.ashx",
                    data: data,
                    complete: (res) => {
                        var limit = this.decrypt(res.responseText)
                        // console.log('数据',limit)
                        if (limit.Code == 1) {
                            if (boolean == 1) {
                                this.Data = this.Data.concat(limit.Data)
                                // console.log('new数据',this.Data)
                            } else {
                                this.Data = limit.Data
                            }
                        } else {
                            this.getToast("无更多数据,换个关键词试试");
                        }
                    },
                });
            }

3.普通请求赋值数组,加载普通请求赋值数组,加载普通请求赋值数组,加载普通请求赋值数组,加载普通请求赋值数组,加载

   initSearchapi(boolean) {
                let data = {
                    typeId: this.keyword ? '' : this.typeId,
                    keyword: this.keyword,
                    pageIndex: this.pageIndex,
                }
                if (this.keyword != this.keyword.replace(/[^\u4E00-\u9FA5]/g, '')) {
                    alert("只能是中文");
                    return false
                }
                $.get({
                    url: "/Handler/Cooperation/Dream/DreamSearchList.ashx",
                    data: data,
                    complete: (res) => {
                        var limit = this.decrypt(res.responseText)
                        // console.log('数据',limit)
                        if (limit.Code == 1) {
                            if (boolean == 1) {
                                this.Data = this.Data.concat(limit.Data)
                                // console.log('new数据',this.Data)
                            } else {
                                this.Data = limit.Data
                            }
                        } else {
                            this.getToast("无更多数据,换个关键词试试");
                        }
                    },
                });
            }