本代码基于Vue的架构

1.首先,要滚动的内容放在一个‘id=box’ 的div里,对div进行scroll事件的监听

<div id="box" class="midea2" @scroll="boxScroll" style="-webkit-overflow-scrolling: touch; flex=1" :style="{height: appHeight + 'px'}">
</div>
<load-more style="width: 100%; margin-top: 20px;" v-if="questionList.length !== 0" v-show="!isLogic" :tip="loadText" :show-loading="showLoad"></load-more>

参数配置:

const perpage = 10
hasMore: true, // 标记是否还有数据
loadText: '', // loading时的文字
showLoading: false, // 展示界面loading
pageNo: 1,
pageLimit: perpage,
totalCount: 0,

部分解释:

在移动端上,在你用overflow-y:scorll属性的时候,你会发现滚动的效果很木,很慢,这时候可以使用-webkit-overflow-scrolling:touch这个属性,让滚动条产生滚动回弹的效果,就像ios原生的滚动条一样流畅。

首先,页面初始化,前端分页,把全部列表数据赋给一个变量: this.wholeList

引入要引用的:

import _ from 'lodash'

boxScroll监听事件:

      // 监听box滚动
boxScroll (e) {
let box = e.target
// console.log('box is scrolling')
if (box.scrollHeight - box.scrollTop === box.offsetHeight && box.scrollTop !== 0) {
this.showLoad = true
console.log('bottom~~')
this._checkMore()
setTimeout(this.searchMore, 700)
// this.searchMore()
}
},

检测是否还有'下一页'的方法:

     _checkMore () {
// const resident = data.data
// if (resident.myJoinList.length < perpage || (resident.paginator.pageNo - 1) * perpage + resident.myJoinList.length > resident.paginator.totalCount) {
if (parseInt(this.totalCount / perpage) + 1 === this.pageNo) {
this.hasMore = false
this.showLoad = false
this.loadText = '暂无更多数据'
}
},

查询‘下一页’数据的方法:

      searchMore () {
if (!this.hasMore) {
return
}
this.pageNo++
this.queryQuestionList()
},

对列表进行前端分页:

     // 对问卷列表前端分页
queryQuestionList () {
if (!this.isFrontPage) {
return
}
// this.questionList = _.cloneDeep(this.wholeList).splice(0, perpage * (this.pageNo + 1))
this.questionList = this.questionList.concat(_.cloneDeep( this.wholeList ).splice(this.questionList.length, perpage * (this.pageNo + 1)))
if (Number(this.isMyAnswer) === 1) {
this.arrangeAnswer()
}
this._checkMore()
},

注: this.questionList  表示,页面上展示的列表

this.wholeList 表示,查询出来的所有列表

【转载】H5页面列表的无线滚动加载(前端分页)的更多相关文章

  1. 移动设备的HTML页面中图片实现滚动加载

    如今移动互联网风靡全球,移动页面的元素也是丰富多彩,一个移动页面的图片超过10张已经是再正常不过的事情了.但是相对,很多移动用户还停留在2G,3G这样的网络中.那么这样带宽的用户,在浏览这样的页面时, ...

  2. 移动端web页面列表类上拉加载,查看详情,iframe嵌套第三方页面遇到的问题以及解决办法

    1.移动端上拉加载 网上有很多成熟的插件,比如iscroll.在这里介绍一下用jquery和js写的上拉加载方法.使用原生的去写上拉加载更多需要三个高度去做对比,以新闻类列表举例,首先需要整个dom的 ...

  3. H5页面实现一个Audio标签加载多个音频文件,并进行播放和展示音频长度

    最近微信项目中有需求,要将微信端发送过来的amr格式的语音文件,在项目中的页面上进行展示和播放,实现方式如下: 1.首先java后台收到微信端的消息推送的时候,使用 ffmpeg将amr格式的音频文件 ...

  4. h5页面列表滚动加载数据

    h5列表滚动加载数据很常见,以下分享下今天做的案例: 前言 这个效果实现需要知道三个参数 1. scrollTop -- 滚动条距离顶部的高度 2. scrollHeight -- 当前页面的总高度( ...

  5. 潭州课堂25班:Ph201805201 django 项目 第二十二课 文章主页 新闻列表页面滚动加载,轮播图后台实现 (课堂笔记)

    新建static/js/news/index.js文件 ,主要用于向后台发送请求, // 新建static/js/news/index.js文件 $(function () { // 新闻列表功能 l ...

  6. 使用infinite-scroll实现Ghost博文列表的滚动加载

    Ghost博客系统默认提供的博文列表为传统的翻页方式(通过点击上一页.下一页等按钮来切换),随着移动客户端的发展,瀑布流式的滚动加载方式得到广泛应用,有效地提高了用户浏览信息的流畅度.下面详述如何通过 ...

  7. 不想分页怎么办??-->页面数据的滚动加载

    在前几天的一次前台数据展示的时候 为了更好的用户的体验 就想着做一个数据的滚动加载功能 于是简单的查询了网上的实现方式 基本都是在页面加载的时候绑定scroll事件 然后判断页面触底的时候 进行aja ...

  8. 基于JQuery实现滚动到页面底端时自动加载更多信息

    基于JQuery实现滚动到页面底端时自动加载更多信息 关键代码: 代码如下: var stop=true; $(window).scroll(function(){ totalheight = par ...

  9. 滚动加载|页面滑到底部加载数据|jquery.endless-scroll插件|使用demo

    <html> <head> <link rel="dns-prefetch" href="http://i.tq121.com.cn&quo ...

随机推荐

  1. kafka各个版本特点介绍和总结

    kafka各个版本特点介绍和总结 1.1 kafka的功能特点: 分布式消息队列 消息队列的数据模型, 形成流式数据. 提供Pub/Sub方式的海量消息处理.以高容错的方式存储海量数据流.保证数据流的 ...

  2. Windows编译Opencv

    下载安装CMake 下载Opencv源码 打开CMake,设置源码路径和生成路径,点击Configure选择要生成的版本.(这里要多次Configure,直到所有红色消失!) 勾选BUILD_open ...

  3. Winform相关

    (1)C# WinForm程序退出的方法 1.this.Close();   只是关闭当前窗口,若不是主窗体的话,是无法退出程序的,另外若有托管线程(非主线程),也无法干净地退出: 2.Applica ...

  4. Asp .Net core 2 学习笔记(1) —— Starup

    这个系列的初衷是便于自己总结与回顾,把笔记本上面的东西转移到这里,态度不由得谨慎许多,下面是我参考的资源: ASP.NET Core 中文文档目录 官方文档 记在这里的东西我会不断的完善丰满,对于文章 ...

  5. Markdown的学习笔记一

    之前学习看些书籍.学些技术都喜欢用xmind做思维导图的笔记,慢慢的发现想把一些笔记做的详细一些就会变得很复杂,个人觉得误了思维导图本意,而且用手机查看的时候也各种不方便.所以开始学习使用markdo ...

  6. java变量初始化顺序

    第一次实例化一个类时,初始化优先顺序为: 1.父类中的静态成员变量和静态代码块初始化 2.本类中的静态成员变量和静态代码块初始化 3.父类中的实例成员初始化 4.父类中的构造方法 5.本类中的实例成员 ...

  7. [转载]SystemD strikes again : Unit X.mount is bound to inactive unit

    http://mamchenkov.net/wordpress/2017/11/09/systemd-strikes-again-unit-var-whatever-mount-is-bound-to ...

  8. [JavaScript] 跳出循环方法总结

    1.forEach() 方法对数组的每个元素执行一次提供的函数.但是没有办法中止或者跳出 forEach 循环,除了抛出一个异常,该方法没有返回值,return/return false/return ...

  9. Windows Phone开发手记-WinRT下自定义圆形ItemsControl

    这里的ItemsControl指的是Xaml里的集合控件,包括ListView,GridView等,此篇博客主要参考MSDN Blog的一篇文章,具体出处为:http://blogs.msdn.com ...

  10. Ruby:Nokogiri

    阅读推荐: Nokogiri的用法我推荐三篇非常给力的文章: http://ruby.bastardsbook.com/chapters/html-parsing/ http://ruby.basta ...