当前位置： 移动技术网 > 移动技术>移动开发>Android > 添加页面滚动监听,来完成到底部加载更多数据

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

2020年07月09日  | 移动技术网移动技术  | 我要评论

代码:

//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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网