txyx_mobile/static/scripts/xszp.js

new Vue({
    el: '#xszp',
    data() {
        return {
            userInfo: {},
            worksList: [],
            ks_id: '',
            ks_name:'',
            cur_page: '1',
            total_page:0,
            isOver:false
        }
    },
    methods: {
        getZpList() {
            let data = {
                api: 'json',
                token: this.userInfo.token,
                ks_id: this.ks_id,
                page: this.cur_page,
                limit: '10'
            }
            const requestURL = 'https://tyyxopenapi.txhlwxx.com/ysgc/zp/index';
            axios({
                method: 'POST',
                url: requestURL,
                data: Qs.stringify(data),
                headers: {
                    "Content-Type": 'application/x-www-form-urlencoded;charset=UTF-8'
                }
            }).then(res => {
                if (res.data.code == 1) {
                    this.ks_name = res.data.template.ks_name;
                    this.worksList = res.data.data.page_data;
                    this.cur_page = res.data.data.page_now;
                    this.total_page = res.data.data.total_page;

                }
            })
        },
        list_scroll() {
            $(window).on("resize scroll", ()=> {

                var windowHeight = $(window).height();//当前窗口的高度
                var scrollTop = $(window).scrollTop();//当前滚动条从上往下滚动的距离
                var docHeight = $(document).height(); //当前文档的高度
                //当 滚动条距底部的距离 + 滚动条滚动的距离 >= 文档的高度 - 窗口的高度
                //换句话说：（滚动条滚动的距离 + 窗口的高度 = 文档的高度）  这个是基本的公式

                if (scrollTop + windowHeight >= docHeight) {
                    if (this.cur_page < this.total_page) {
                        this.cur_page ++;
                        let data = {
                            api: 'json',
                            token: this.userInfo.token,
                            ks_id: this.ks_id,
                            page: this.cur_page,
                            limit: '10'
                        }
                        const requestURL = 'https://tyyxopenapi.txhlwxx.com/ysgc/zp/index';
                        axios({
                            method: 'POST',
                            url: requestURL,
                            data: Qs.stringify(data),
                            headers: {
                                "Content-Type": 'application/x-www-form-urlencoded;charset=UTF-8'
                            }
                        }).then(res => {
                            if (res.data.code == 1) {
                                this.ks_name = res.data.template.ks_name;
                                this.worksList = this.worksList.concat(res.data.data.page_data);
                                this.cur_page = res.data.data.page_now;
                                this.total_page = res.data.data.total_page;
                                this.isOver = false;
                            }
                        })
                    } else {
                        this.isOver = true;
                    }

                }
            });
        },
    },
    mounted() {
        if (localStorage.getItem('userInfo')) {
            this.userInfo = JSON.parse(localStorage.getItem('userInfo'));
        }
        if (location.search.includes('ks_id')) {
            this.ks_id = location.search.substring(7);
            this.getZpList();
            this.list_scroll();
        }
    }
})