1. 程式人生 > >vue滾動載入事件

vue滾動載入事件

   created(){//頁面建立的時候呼叫
        this.scrollLoding();
    },
scrollLoding() {
               // 快取指標
            let self = this;
            // 上一頁面帶過來的引數內容
            // console.log(self.dataParams.ID)
            // 滾動條的高
           // 註冊scroll事件並監聽  
            if(self.coffeeType.record.length >= 20){
                console.log('長度大於20')
                    window.addEventListener('scroll',this.addData);

            }else{
                 window.removeEventListener('scroll',self.addData);
                 self.showTip = true;
            }
           },
            addData(){
                var scrollTop = (window.pageYOffset  || document.documentElement.scrollTop || document.body.scrollTop)
                // 拿頁面的總數和後臺返回的總數對比,如果頁面數量小於等於後臺總數便載入
                let self = this;
                // let windowHeight = $(window).height()//螢幕解析度的高
                // let scrollHeight = $(document).height()//整個文件的高度,可視具體情況使用
                // console.log("當前可視的高度加滾動條的高度-->變化前1::"+Math.ceil(window.screen.height + scrollTop ));//當前可視的高度加滾動條的高度
                if(self.m1===1){
                    self.num2=document.body.clientHeight;//當前整個文件的高度
                    self.num=self.num2;
                    self.m1+=1;
                }
                // console.log("當前整個文件的高度-->變化前2::"+self.num);
                if (window.screen.height + scrollTop >= self.num) {
                    self.num=self.num2*(self.currentPage);//當前載入頁數乘以文件高度得出20條資料的長度
                    // console.log("當前可視的高度加滾動條的高度-->變化後1:::"+Math.ceil(window.screen.height + scrollTop));
                    // console.log("當前整個文件的高度-->變化後2::"+self.num);
                    console.log('進來了');
                        let params = {
                            pageSize: 20,
                            sysUnit:44,
                            currentPage: self.currentPage,  // 滾動載入頁面數量 
                            type:self.dataParams.type,
                            // 以下為上一頁面傳過來的引數
                            NAME:  self.dataParams.NAME, //名稱-name
                            T_STATUS: self.dataParams.T_STATUS,//歷史人員
                            ISEQUERY:  self.dataParams.ISEQUERY,
                            ID:  self.dataParams.ID,//349378497623763818
                            SEX:  self.dataParams.SEX,
                            BIRTHDAY1: self.dataParams.BIRTHDAY1,
                            BIRTHDAY2: self.dataParams.BIRTHDAY2,
                            NATION:  self.dataParams.NATION,
                            NATIVE_PLACE: self.dataParams.NATIVE_PLACE
                        };
                        self.showLoding = true;
                        self.$http.get(self.apis.baseURL,{params}) .then(function(response) {
                            self.totalRecord = response.data.totalRecord
                            console.log( response.data.currentPage, response.data.pageCount)
                            // 對比當前頁和總頁數
                            if(response.data.currentPage === response.data.pageCount){
                                window.removeEventListener('scroll',self.addData);
                                self.showLoding = false;
                                self.showTip = true;
                                return;
                            }else{
                                self.showLoding = false;
                                self.currentPage++;
                                console.log('成功後的頁面數量', self.currentPage)
                                    // self.numLen = response.data.record.length;
                                self.listTitle  =eval("("+response.data.columnname+")");
                                let Attribute  =eval("("+response.data.column+")");
                                response.data.record.forEach(item => {
                                        // ID = item.P_KEY;
                                        self .ID.push(item.P_KEY);
                                        //  獲取左邊的name
                                        self .leftName.push(
                                            item.NAME //姓名
                                        );

                                        let list = [];
                                        Attribute.forEach(data => {
                                            //對陣列中的每一個引數迴圈
                                            list.push(item[data]);
                                        });
                                        // console.log(list)//每一個引數對應的屬性名
                                        self.listContent.push(list);
                                    });
                            }
                            // 資料更新完畢,將開關開啟
                                // sw = true;
                        })
                        .catch(error => console.log(error));
                }else{

                }
            },
    },

  destroyed () {//銷燬頁面時移除滾動事件
          window.removeEventListener('scroll',this.addData);
    },