【转载】H5页面列表的无线滚动加载(前端分页)
本代码基于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页面列表的无线滚动加载(前端分页)的更多相关文章
- 移动设备的HTML页面中图片实现滚动加载
如今移动互联网风靡全球,移动页面的元素也是丰富多彩,一个移动页面的图片超过10张已经是再正常不过的事情了.但是相对,很多移动用户还停留在2G,3G这样的网络中.那么这样带宽的用户,在浏览这样的页面时, ...
- 移动端web页面列表类上拉加载,查看详情,iframe嵌套第三方页面遇到的问题以及解决办法
1.移动端上拉加载 网上有很多成熟的插件,比如iscroll.在这里介绍一下用jquery和js写的上拉加载方法.使用原生的去写上拉加载更多需要三个高度去做对比,以新闻类列表举例,首先需要整个dom的 ...
- H5页面实现一个Audio标签加载多个音频文件,并进行播放和展示音频长度
最近微信项目中有需求,要将微信端发送过来的amr格式的语音文件,在项目中的页面上进行展示和播放,实现方式如下: 1.首先java后台收到微信端的消息推送的时候,使用 ffmpeg将amr格式的音频文件 ...
- h5页面列表滚动加载数据
h5列表滚动加载数据很常见,以下分享下今天做的案例: 前言 这个效果实现需要知道三个参数 1. scrollTop -- 滚动条距离顶部的高度 2. scrollHeight -- 当前页面的总高度( ...
- 潭州课堂25班:Ph201805201 django 项目 第二十二课 文章主页 新闻列表页面滚动加载,轮播图后台实现 (课堂笔记)
新建static/js/news/index.js文件 ,主要用于向后台发送请求, // 新建static/js/news/index.js文件 $(function () { // 新闻列表功能 l ...
- 使用infinite-scroll实现Ghost博文列表的滚动加载
Ghost博客系统默认提供的博文列表为传统的翻页方式(通过点击上一页.下一页等按钮来切换),随着移动客户端的发展,瀑布流式的滚动加载方式得到广泛应用,有效地提高了用户浏览信息的流畅度.下面详述如何通过 ...
- 不想分页怎么办??-->页面数据的滚动加载
在前几天的一次前台数据展示的时候 为了更好的用户的体验 就想着做一个数据的滚动加载功能 于是简单的查询了网上的实现方式 基本都是在页面加载的时候绑定scroll事件 然后判断页面触底的时候 进行aja ...
- 基于JQuery实现滚动到页面底端时自动加载更多信息
基于JQuery实现滚动到页面底端时自动加载更多信息 关键代码: 代码如下: var stop=true; $(window).scroll(function(){ totalheight = par ...
- 滚动加载|页面滑到底部加载数据|jquery.endless-scroll插件|使用demo
<html> <head> <link rel="dns-prefetch" href="http://i.tq121.com.cn&quo ...
随机推荐
- kafka各个版本特点介绍和总结
kafka各个版本特点介绍和总结 1.1 kafka的功能特点: 分布式消息队列 消息队列的数据模型, 形成流式数据. 提供Pub/Sub方式的海量消息处理.以高容错的方式存储海量数据流.保证数据流的 ...
- Windows编译Opencv
下载安装CMake 下载Opencv源码 打开CMake,设置源码路径和生成路径,点击Configure选择要生成的版本.(这里要多次Configure,直到所有红色消失!) 勾选BUILD_open ...
- Winform相关
(1)C# WinForm程序退出的方法 1.this.Close(); 只是关闭当前窗口,若不是主窗体的话,是无法退出程序的,另外若有托管线程(非主线程),也无法干净地退出: 2.Applica ...
- Asp .Net core 2 学习笔记(1) —— Starup
这个系列的初衷是便于自己总结与回顾,把笔记本上面的东西转移到这里,态度不由得谨慎许多,下面是我参考的资源: ASP.NET Core 中文文档目录 官方文档 记在这里的东西我会不断的完善丰满,对于文章 ...
- Markdown的学习笔记一
之前学习看些书籍.学些技术都喜欢用xmind做思维导图的笔记,慢慢的发现想把一些笔记做的详细一些就会变得很复杂,个人觉得误了思维导图本意,而且用手机查看的时候也各种不方便.所以开始学习使用markdo ...
- java变量初始化顺序
第一次实例化一个类时,初始化优先顺序为: 1.父类中的静态成员变量和静态代码块初始化 2.本类中的静态成员变量和静态代码块初始化 3.父类中的实例成员初始化 4.父类中的构造方法 5.本类中的实例成员 ...
- [转载]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 ...
- [JavaScript] 跳出循环方法总结
1.forEach() 方法对数组的每个元素执行一次提供的函数.但是没有办法中止或者跳出 forEach 循环,除了抛出一个异常,该方法没有返回值,return/return false/return ...
- Windows Phone开发手记-WinRT下自定义圆形ItemsControl
这里的ItemsControl指的是Xaml里的集合控件,包括ListView,GridView等,此篇博客主要参考MSDN Blog的一篇文章,具体出处为:http://blogs.msdn.com ...
- Ruby:Nokogiri
阅读推荐: Nokogiri的用法我推荐三篇非常给力的文章: http://ruby.bastardsbook.com/chapters/html-parsing/ http://ruby.basta ...