使用mescroll实现上拉加载与下拉刷新
现在上拉加载与下拉刷新几乎已经是移动端必备功能之一了，自己实现一个太麻烦，但是好用的插件又非常少。之前看到网上很多人都在用iScroll，于是也尝试用它做了几个DEMO，但或多或少都有一些问题，比如这个插件缺少暂停/恢复滚动的功能，数据不满一页时上拉有问题，等等。官方也没有提供相应的例子，加上配置项非常多，作者也不维护了，最后只好放弃研究。后来偶然发现了mescroll这个框架，并且官网提供的例子非常丰富，比较符合国内移动端的开发需求，于是打算尝试一下。
虽然官网的例子down下来是可以运行的，但并非真实数据，在切换到真实数据源后，也出现了各种各样的问题，这里记录一下遇到的问题和解决方案。首先是HTML结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>mescroll下拉刷新与上拉加载更多</title>
<!--mescroll.min.css为mescroll的样式文件，必须引用-->
<link rel="stylesheet" href="css/mescroll.min.css">
<!--scroll.css为自定义样式，非必须-->
<link rel="stylesheet" href="scroll.css">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<!--mescroll.min.js为mescroll的脚本文件，必须引用-->
<script src="js/mescroll.min.js"></script>
<!--scroll.js为自定义脚本，非必须-->
<script src="scroll.js"></script>
</head>
<body>
<header>Header</header>
<!--mescroll这个样式是框架的硬性要求，不能删，但可以在样式表中覆盖-->
<div id="is-0" class="mescroll">
<ul class="dataList" id="dataList"></ul>
</div>
<footer>Footer</footer>
</body>
</html>
结构比较简单，一个header一个footer外加中间一个滚动容器。接下来是scroll.css里的样式编写：
/* 头尾的样式，采用fixed布局，不重要 */
header,
footer {
height: 50px;
text-align: center;
line-height: 50px;
text-shadow: black 0.1em 0.1em 0.2em;
color: #ffffff;
left:;
width: 100%;
position: fixed;
background: #4bbaf2;
background: -moz-linear-gradient(top, #4bbaf2 0%, #4bbaf2 52%, #2d80e5 100%);
background: -webkit-linear-gradient(top, #4bbaf2 0%, #4bbaf2 52%, #2d80e5 100%);
background: linear-gradient(to bottom, #4bbaf2 0%, #4bbaf2 52%, #2d80e5 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4bbaf2', endColorstr='#2d80e5', GradientType=0);
}
header {
top:;
}
footer {
bottom:;
}
/* end */ /*********** 滚动容器的样式start (重点关注这一部分) ***********/
.mescroll {
position: fixed;
top: 50px;
bottom: 50px;
left:;
height: auto; /*mescroll.min.css中使用了height:100%，与现有布局冲突，所以这里通过height:auto覆盖掉*/
background: #f6f6f6;
}
/*滚动列表的样式*/
.mescroll .dataList {
min-height: 100%; /*通过设置最小高度，可以把上拉加载的提示撑到底部，不然没有数据或数据较少时会在页面显示出来，不美观*/
} /*数据为空时显示的图标及文案，垂直居中*/
.mescroll .dataList .mescroll-empty {
padding-top:;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
/*********** 滚动容器的样式end ***********/ /* li及里面内容的样式，按照自己需求定制即可，不重要 */
.mescroll .dataList li {
padding: 10px;
overflow: hidden;
border-bottom: 1px solid #ccc;
word-break: break-all;
}
.mescroll .dataList li h3 {
font-size: 14px;
}
.mescroll .dataList li p {
font-size: 12px;
margin-top: 5px;
color: #666;
}
最终得到的效果页面如下：
分页测试数据的准备
页面结构已经搭好了，现在还差能够测试的数据。测试数据最好不依赖数据库和复杂的服务器环境，折腾起来太麻烦。这里推荐一个基于node.js的第三方工具 json-server ，可以模拟分页数据。安装成功后，在任一目录下新建一个db.json文件，并写入一些测试数据，
{
"posts": [
{
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
},
{
"userId": 1,
"id": 2,
"title": "qui est esse",
"body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
},
{
"userId": 1,
"id": 3,
"title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
"body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
}]
}
然后在当前目录打开命令行，执行 json-server db.json --watch 然后会得到一个链接， http://localhost:3000/posts ，访问这个链接就能得到测试数据了。现在来试试分页，按照文档中的配置在url中输入http://localhost:3000/posts?_limit=10&_page=1 发现已经可以取到分页数据了。最后就是初始化mescroll：
var mescroll = new MeScroll("is-0", {
up: {
callback: upCallback, //上拉加载的回调
isBounce: false, //如果您的项目是在iOS的微信,QQ,Safari等浏览器访问的,建议配置此项
auto: true,
htmlNodata: '<span style="font-size:12px">没有更多数据了</span>',
toTop: {
src: '这里放返回顶部的图片路径',
offset: 80
},
empty: {//数据为空
warpId:'dataList', //对应ul元素的id
icon: '这里放数据为空时展示的图片路径',
tip: "暂无相关数据~",
btntext: "",
btnClick: null,
supportTap: false
}
}
});
由于下拉刷新mescroll在内部已经配置好了，所以没有特殊需求就不用再次配置，最后看看upCallback回调，这个方法处理上拉加载：
function upCallback(page) {
page.size = 10; //每页显示的数据条数，mescroll内置默认为10
var data = {_limit: page.size, _page: page.num}; //page.num由mescroll内部控制，从1开始，不用做特殊处理，如果想从0开始
$.get('http://localhost:3000/comments', data, function (data) {
var container = $('#is-0');
var content = '';
var len = data.length; //保存此次请求获取到的数据个数，endBySize要用到这个变量
$.each(data, function (index, item) {
content += `<li><h3>${item.title}</h3><p>${item.body}</p></li>`;
});
var listBox = container.find('ul').eq(0);
//如果请求为第一页，清空列表后再往里填充数据，是针对下拉刷新的处理
if (page.num === 1) listBox.empty();
listBox.append(content);
mescroll.endBySize(len, total); //total为数据总量，由接口返回。测试数据中没有提供是因为接口不支持。
});
}
最后的效果如下：
使用mescroll实现上拉加载与下拉刷新的更多相关文章
- mescroll.js简单的上拉加载、下拉刷新插件，带完整注释
声明:本插件模仿自mescroll.js,随手所作,仅以注释提供思路,只实现了部分效果,且没有考虑兼容,有兴趣的朋友随意一看.api大家可参考mescroll.js API汇总一文. demo:点我下 ...
- UITableView与UISearchController搜索及上拉加载，下拉刷新
#import "ViewController.h" #import "TuanGouModel.h" #import "TuanGouTableVi ...
- Vue-上拉加载与下拉刷新（mint-ui：loadmore）一个页面使用多个上拉加载后冲突问题
所遇问题: 该页面为双选项卡联动,四个部分都需要上拉加载和下拉刷新功能,使用的mint-ui的loadmore插件,分别加上上拉加载后,只有最后一个的this.$refs.loadmore.onTop ...
- vue.js移动端app实战4：上拉加载以及下拉刷新
上拉加载以及下拉刷新都是移动端很常见的功能,在搜索或者一些分类列表页面常常会用到. 跟横向滚动一样,我们还是采用better-scroll这个库来实现.由于better已经更新了新的版本,之前是0.几 ...
- 移动端上拉加载，下拉刷新效果Demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue-scroller实现vue单页面的上拉加载和下拉刷新问题
在vue中如何简单的实现页面的上拉加载和下拉刷新,在这里我推荐使用vue-scrolle插件. vue-scrolle的基本使用方法: 1.下载 npm i vue-scroller -D 2.导包 ...
- C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口 字符串的本质 AJAX原生JavaScript写法
C#构造方法(函数) 一.概括 1.通常创建一个对象的方法如图: 通过 Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...
- 你必须了解的RecyclerView的五大开源项目-解决上拉加载、下拉刷新和添加Header、Footer等问题
前段时间做项目由于采用的MD设计,所以必须要使用RecyclerView全面代替ListView.但是开发中遇到了需要实现RecyclerView上拉加载.下拉刷新和添加Header以及Footer等 ...
- vue使用vant-ui实现上拉加载、下拉刷新和返回顶部
vue使用vant-ui实现上拉加载.下拉刷新和返回顶部 vue现在在移动端常用的ui库有vant-ui和mint-ui,上拉加载.下拉刷新和返回顶部也是移动端最基础最常见的功能.下面就用vant-u ...
随机推荐
- Hihocoder 1496 寻找最大值（状态压缩 + 高位前缀和）
题目链接 Hiho 1496 设$f[i]$为二进制集合包含$i$的最大的两个数,这个东西用高维前缀和维护. 高位前缀和转移的具体方案 :枚举每一位,然后枚举每个集合,大的转移到小的. 注意合并的时 ...
- ES6 Promise的resolved深入理解
Promise的概念在ES6标准推出来之前已经深入人心,很多框架和第三方库都有类似的实现.但在深入理解ES6的Promise对象的时候,受之前经验的影响,很多概念给人似是而非的感觉,其中有一个特别明显 ...
- BZOJ 2669- [cqoi2012]局部极小值
不错的题啊 挺好的结合了容斥和状压DP 保证每个数各不相同,又有大小关系,那么就可以将数字从小到大填. 不难发现 局部极小值<=8,这个可以状压,f[i][j] 表示填了前i个数,局部极小值被填 ...
- Mobius反演与积性函数前缀和演学习笔记 BZOJ 4176 Lucas的数论 SDOI 2015 约数个数和
下文中所有讨论都在数论函数范围内开展. 数论函数指的是定义域为正整数域, 且值域为复数域的函数. 数论意义下的和式处理技巧 因子 \[ \sum_{d | n} a_d = \sum_{d | n} ...
- POJ 3694 Network （求桥，边双连通分支缩点，lca）
Network Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 5619 Accepted: 1939 Descripti ...
- ES6中的模板字符串---反引号``
在react中,反引号``有特殊的含义. 如MDN中所述,模板字符串(Template literals)允许嵌入表达式,并且支持多行字符串和字符串插补特性.基本语法为以下几种: 其中第一行为最基本用 ...
- Vue计算属性和监听属性
一.计算属性 计算属性关键词: computed.计算属性在处理一些复杂逻辑时是很有用的. 可以看下以下反转字符串的例子: <div id="app"> {{ mess ...
- ElasticSearch _xpack角色管理
权限管理可以通过kibana的Management界面进行,本篇主要介绍的是通过命令进行,角色API使您能够在本机域中添加,删除和检索角色. 要使用此API,您必须至少具有manage_securit ...
- cocos2d-x 2.2.0 图片选中聚焦 ，图片描边 CCClippingNode 实现
效果例如以下图 左边箭头是x方向翻转的.右边箭头有旋转和缩放action. 大概实现方法:用箭头作为遮罩层,底图是一个绘制的矩形,得到一个黄色箭头背景.在用schedule尾随要聚焦箭头动作.这个 ...
- hdata datax交流总结
http://blog.csdn.net/zlm838687/article/details/74781522 hdata datax交流总结 今天和阿里云的同学就数据同步做了简要的交流,下面就交流的 ...