java h5 上拉加载更多_移动端H5页面上拉加载更多功能实现（二）

之前已经写过一篇关于上拉加载更多的文章，那个主要是根据滚动实现分页向后台发起请求实现。这次实现方式为后台返回所有需要加载的数据，前端这边做视觉上的分页效果。实现原理也是根据滚动距离触发加载更多的条件。

我这边的需求是需要在模态框里实现一个列表的加载更多的功能。实现原理：根据弹框内的父元素的溢出高度也就是滚动高度超出十条数据的高度，立即触发加载下一页。

具体代码实现如下：

getOffsetHeight(){this.$nextTick(() => { //使用nextTick为了保证dom元素都已经渲染完毕

let cardList =[];

let pagecount= 0;

let receivedcardList= this.receivedState[this.isStateActive].cardList;for(let i = 0; i<= receivedcardList.length ; i+=10){

cardList.push(receivedcardList.slice(i,i+10))

}this.receivedState[this.isStateActive].cardList =cardList[pagecount];this.$refs.receivedCardList.onscroll = ()=>{if(this.isLoading){if((this.$refs.receivedCardList.scrollTop >= (730 + pagecount*730)) && this.isStateActive == 1){

if(pagecount >=cardList.length){this.isLoading = false;

}else{this.isLoading = true;

pagecount++;if(cardList[pagecount] && cardList[pagecount].length> 0){this.receivedState[this.isStateActive].cardList = this.receivedState[this.isStateActive].cardList.concat(cardList[pagecount]);

}

})

}

其中: receivedcardList 接收到的是后台返回的所有数据的一个数组，定义一个cardList 将receivedcardList分割成十条一组的数据组成的数组，然后对cardlist 进行操作。通过监听ref获取的dom元素的滚动高度来做条件判断。定义一个分页变量，每次加载超过分页乘以定义好的滚动距离即可触发条件。当分页大小超过cardList长度值就将变量isLoading 设置为false,以此来保证数组不再继续累加(相当于阻止继续请求的一个操作)。

以上。

java h5 上拉加载更多_移动端H5页面上拉加载更多功能实现（二）相关推荐

上拉电阻的作用原理_单片机P0口以及上拉电阻
(一) 在我们讲解P0端口之前我们首先梳理一下各个端口有什么不同之处: P0口有三个功能: 1.外部扩展存储器时,当做数据(Data)总线(如图1中的D0~D7为数据总线接口) 2.外部扩展存储器时, ...
java文件上传最优方案_大规格文件的上传优化
在开发过程中,收到这样一个问题反馈,在网站上传 100 MB 以上的文件经常失败,重试也要等老半天,这就难为需要上传大规格文件的用户了.那么应该怎么做才能快速上传,就算失败了再次发送也能从上次中断的地 ...
移动端web设计尺寸_移动端H5页面的设计稿尺寸（上）
由于HTML5和微信内置浏览器的火爆,移动端H5网页越发流行.在设计制作移动端网页的时候,你是否疑惑,这种网站设计稿应该做成的多少屏宽,是否应该跟手机的分辨率一致,还是应该按照iPhone的分辨率来设 ...
java一加到十_刘作虎“口出狂言”：一加7流畅度超过iphone，你相信吗？
尽管是一个比较小众的手机品牌,一加一直受到不少网友的喜爱.和其他品牌不一样的是,一加手机一直坚持使用极其接近安卓原生态的深度系统,在界面上也更加的简洁.一加手机一直常年霸占了安卓手机的性能最强榜单,在 ...
移动端web设计尺寸_移动端H5页面的设计稿尺寸大小规范
当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 那么多手机屏幕尺寸,设计稿 ...
ajax右侧刷新加载jsp,jsp实现局部刷新页面、异步加载页面的方法
jsp实现局部刷新页面.异步加载页面的方法局部刷新页面.异步加载页面方案: 1.在jsp页面需要刷新的地方增加一个控件 2.新建一个jsp页面:aaa.jsp(用来放置需要刷新的内容) 3.将id为 ...
php debug 打印变量_打印变量到页面上的方法 PHP debug函数
打印变量到页面上的方法 PHP debug函数 (2012-03-16 17:17:00) 标签: 杂谈当我们对php进行调试的时候往往想知道,某些变量是什么内容.下面这个函数可以将PHP的内部函数 ...
为什么request的页面与原页面不同_如何在不同页面上使用不同的Joomla CSS
简介: 我们的一位用户希望其网站首页具有不同的背景. Joomla确实提供了几种自定义单个页面的方法.本教程将向您介绍两个Joomla选项.让我们开始吧 ... 我们的一位用户希望其网站首页具有不同的 ...
不同角色进入使用不同功能_如何在不同页面上使用不同的Joomla CSS
简介: 我们的一位用户希望其网站首页具有不同的背景. Joomla确实提供了几种自定义单个页面的方法.本教程将向您介绍两个Joomla选项.让我们开始吧 ... 我们的一位用户希望其网站首页具有不同的 ...

java h5 上拉加载更多_移动端H5页面上拉加载更多功能实现（二）

java h5 上拉加载更多_移动端H5页面上拉加载更多功能实现（二）相关推荐

最新文章

热门文章