添加页面滚动监听,来完成到底部加载更多数据

代码:

//document.documentElement.scrollHeight 文档总高度
//document.documentElement.clientHeight 可视区域高度
//ocument.documentElement.scrollTop  滚动的高度

 window.addEventListener('scroll', () => {
                if (document.documentElement.scrollHeight - document.documentElement.clientHeight - document.documentElement.scrollTop < 1) {
                    if (this.p === 4) {
                        return;
                    }
                    this.show = true;

                    window.setTimeout(() => {
                        axios.get(`http://localhost:8080/data${this.p}.json`).then(res => {
                            this.listData = [...this.listData, ...res.data.result.list];
                            this.list = [...this.list, ...res.data.result.list]
                        });

                        this.show = false;
                        this.p++;
                    }, 3000)
                }
            })

vue中添加钩子函数来控制加载图片显示否:

代码

  directives: {
            hidden: {
                bind(el, binding) {
                    if (binding.value) {
                        el.style.visibility = 'visible';
                    } else {
                        el.style.visibility = 'hidden';
                    }
                },
                initial(el, binding) {
                    if (binding.value) {
                        el.style.visibility = 'visible';
                    } else {
                        el.style.visibility = 'hidden';
                    }
                },
                update(el, binding) {
                    if (binding.value) {
                        el.style.visibility = 'visible';
                    } else {
                        el.style.visibility = 'hidden';
                    }
                }
            }
        }

本文地址：https://blog.csdn.net/wys997/article/details/107208479