原文地址：vue 实现滚动到页面底部开始加载更多 - will很忙 - 博客园

vue 实现滚动到页面底部开始加载更多

1	`scrollTop 页面滚动的高度，`

1	`clientHeight 可视区域高度`

1	`scrollHeight 可滚动内容的高度`

mounted(){

　　//添加滚动事件，检测滚动到页面底部

window.addEventListener('scroll', this.scrollBottom)

// 滚动到页面底部时，请求内容scrollBottom() {

this.loading = false

let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

let clientHeight = document.documentElement.clientHeight;

let scrollHeight = document.documentElement.scrollHeight;

let bottomOfWindow = scrollTop + clientHeight >= scrollHeight-4

console.log(scrollHeight)

if (scrollTop!=0&&bottomOfWindow && this.loading == false &&this.finished == false) {

this.loading = true

this.offset = this.offset + this.limit;

let param = {

offset: this.offset,

limit: this.limit

}

getArea(param).then((res) => {

if (res.code == 200) {

this.loading = false

this.area = this.area.concat(res.data); //追加数据

if (res.data.length == 0) {

//数据全部加载完成

this.finished = true;

} else {

this.finished = false;

}

})

}

vue滚动到底部，自动加载更多相关推荐

html5到底部自动加载,列表滚动到底部自动加载更多
列表滚动到底部自动加载更多在移动端,经常会用到列表滚动到底部,拉一下加载更多,或者点一下加载更多等等,今天我说说我的一个实现的思路. 通过监听列表的滚动时间,当用户滚动到列表的底部,并停留一小段时间 ...
探索SwipeRefreshLayout配合自定义ListView完成下拉刷新、滑到底部自动加载更多
在Android开发过程中经常需要实现上下拉刷新功能,Google推出的下拉刷新控件SwipeRefreshLayout(彩虹条),由于官方版本只有下拉刷新而没有上拉加载更多的功能,很多人也尝试在这个 ...
[转]ListView滚动到底部自动加载数据
转自:http://blog.csdn.net/shineflowers/article/details/41744241 在Android中有很多时候会选择用ListView加载数据,有的是分批加载 ...
Jetpack Compose 无限加载列表（滚到底部自动加载更多）
Android 中使用 ListView 或者 RecycleView 经常有滚动到底部自动 LoadMore 的需求,那么在 Compose 中该如何实现呢? 两种方法可供选择: 基于 paging ...
JS滚动条到网页底部自动加载更多内容
2019独角兽企业重金招聘Python工程师标准>>> <html> <head> <meta charset="gb18030" ...
php滑到底部自动加载更多,ListView滑动到底部自动加载更多
第一种滑动的时候不会停顿 listView.setOnScrollListener(new OnScrollListener() { @Override public void onScrollSt ...
滚动到底部自动加载 html,移动端页面滚动到底部自动加载数据
$(window).bind("scroll", function () { if(getScrollHeight() == getDocumentTop() + getWindo ...
android音乐播放器音乐加载,Android开源音乐播放器之在线音乐列表自动加载更多...
系列文章前言当咱们的ListView数据比较多时,咱们通常都会选择分页显示,而分页显示就须要一个动做触发加载更多操做,一般咱们会使用上拉加载更多,但我以为不够人性化,由于用户须要手动上拉,因此更加 ...
html底部自动加载下一页,js页面滚动到底部时自动加载下一页数据
一段滚动到页面底部自动加载更多数据的js代码,需要jquery.js . jquey.tmpl.js 支持 var Data = { PageCount: 1, PageSize: 30, IsCom ...
仿新浪微博实现ListBox下拉刷新和到底部自动加载
一.下拉刷新下拉刷新实现思路: 1.定义一个PullDownToRefreshPanel容器控件.为它添加3种状态模板,分别是PullingDownTemplate,ReadyToReleaseTe ...

vue滚动到底部，自动加载更多

vue 实现滚动到页面底部开始加载更多

vue滚动到底部，自动加载更多相关推荐

最新文章

热门文章