一、概述
Mescroll.js是一款移动端的下拉刷新和上拉加载更多组件，因其简单易用和功能强大而深受开发者的喜爱。Mescroll.js可以应用于各种移动端网站和APP，能够支持多种场景和主题，并且具有高度定制性，便于开发者进行二次封装。
Mescroll.js支持双向拉动，即用户既可以向下下拉刷新，也可以向上上拉加载更多，而且可以自定义样式和效果，支持自动分页加载，同时对SEO友好。
二、基本使用方法
Mescroll.js的基本使用方法非常简单，只需引入mescroll.css和mescroll.min.js，然后在页面中添加一个id为"mescroll"的div即可。
<!-- 引入 mescroll.css -->
<link rel="stylesheet" type="text/css" href="mescroll.min.css" />
<!-- 引入 mescroll.min.js -->
<script src="mescroll.min.js"><\/script>
<!-- 在页面中添加一个id为"mescroll"的div -->
<div id="mescroll"></div>
接下来，我们需要在js代码中实例化Mescroll，并传入一些配置参数。下面是一个简单的例子：
var mescroll = new Mescroll('mescroll', {
up: {
auto: true,
callback: function(page){
// 加载更多数据。
}
}
});
这段代码中，我们在页脚中创建了一个Mescroll实例，并传入第一个参数为"mescroll"，第二个参数为一个对象。这个对象中，我们设置了"up"属性，表示我们要添加上拉加载更多功能。"auto"属性表示组件是否自动识别到底部后自动触发上拉加载，默认为false；"callback"属性表示上拉加载的触发时调用的函数，这个函数接收一个page参数，表示当前加载的第几页。
当然，Mescroll组件还有很多其他的配置参数和方法，我们可以根据自己的需要进行适当的设置和调用。比如，如果我们需要支持下拉刷新，我们可以在配置对象中添加"down"属性，并设置相应的参数。
下面是一个包含下拉刷新和上拉加载的完整的代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mescroll Demo</title>
<!-- 引入mescroll.css -->
<link rel="stylesheet" href="mescroll.min.css">
</head>
<body>
<div id="mescroll" style="height: 600px; overflow: auto;">
<!-- 添加数据列表 -->
<ul id="dataList">
<li>数据1</li>
<li>数据2</li>
<li>数据3</li>
<li>数据4</li>
<li>数据5</li>
<li>数据6</li>
<li>数据7</li>
<li>数据8</li>
<li>数据9</li>
<li>数据10</li>
</ul>
</div>
<!-- 引入mescroll.min.js -->
<script src="mescroll.min.js"></script>
<script>
var mescroll = new Mescroll('mescroll', {
up: {
auto: true,
callback: function(page){
// 模拟ajax请求，两秒钟后完成
setTimeout(function(){
var dataList = document.getElementById('dataList');
for(var i = 0; i < 10; i++){
dataList.appendChild(document.createElement('li')).innerText = '数据' + (10 * (page - 1) + i + 1);
}
mescroll.endBySize(dataList.children.length, dataList.children.length >= 60);
}, 2000);
}
},
down: {
auto: true,
callback: function(){
// 模拟ajax请求，两秒钟后完成
setTimeout(function(){
var dataList = document.getElementById('dataList');
var len = dataList.children.length;
for(var i = 0; i < 10; i++){
dataList.insertBefore(document.createElement('li'), dataList.children[0]).innerText = '新数据' + (len + i + 1);
}
mescroll.endSuccess();
}, 2000);
}
}
});
</script>
</body>
</html>
三、高级用法
Mescroll.js提供了许多高级用法，让开发者可以进行更加自由和灵活的定制。
1. 自定义HTML结构和样式
如果默认的HTML结构和样式不能满足你的要求，你可以通过传入自定义的HTML和CSS来自定义样式，或者通过JS钩子函数来自定义结构和样式，甚至可以通过回调函数实时修改结构和样式。
下面是一个通过JS钩子函数来自定义结构和样式的例子：
var mescroll = new Mescroll('mescroll', {
up: {
auto: true,
callback: function(page){
// 加载更多数据。
},
htmlLoading: '
加载中...
',
htmlNodata: '
没有更多数据了
',
onInit: function(mescroll, upwarp){
var progress = upwarp.querySelector('.upwarp-progress-fill');
var tip = upwarp.querySelector('.upwarp-tip');
mescroll.optUp.onScroll = function(scrollY, isUp){
if(isUp){
tip.innerText = scrollY > 30 ? '释放立即加载' : '下拉刷新';
progress.style.width = Math.min(100, Math.round(scrollY / 3)) + '%';
}
};
mescroll.optUp.onScrollEnd = function(){
tip.innerText = '加载中...';
progress.style.width = 0;
};
}
}
});
2. 数据分页和自动加载
Mescroll.js提供了数据分页和自动加载的功能，能够自动识别网页内容的滚动情况，并根据剩余内容自动加载数据，避免了上拉加载时需要手动点击或者滑动到底部的操作。
下面是一个使用自动分页和自动加载的例子：
var mescroll = new Mescroll('mescroll', {
up: {
auto: true,
pager: {
page: {
num: 0, // 当前页码
size: 10 // 每页数据量
},
next: function(page){
// 请求下一页数据
// ...
}
},
noMoreSize: 60 // 数据总量超过60条时，自动禁止上拉加载
}
});
在这个例子中，我们设置了pager属性，表示我们要进行数据分页。Mescroll组件会根据num和size分别代表当前页码和每页数据量的值来自动计算出应该请求的下一页数据。同时，我们通过noMoreSize属性，把自动禁止上拉加载的阈值设置为60条。
3. 列表上的其他交互
Mescroll.js提供了以下i额外的交互功能，让列表更加丰富和互动性。
（1）点击加载更多
在Mescroll.js中，我们可以通过点击加载更多的方式来实现上拉加载。
var mescroll = new Mescroll('mescroll', {
up: {
use: true,
callback: function(page){
// 加载更多数据。
},
htmlLoading: '
点击加载更多
',
htmlNodata: '
没有更多数据了
',
toTop: {
btnTxt: "回到顶部"
}
}
});
mescroll.endByClick(); // 点击加载更多
（2）回到顶部
Mescroll.js支持回到顶部功能，非常方便。
var mescroll = new Mescroll('mescroll', {
up: {
auto: true,
callback: function(page){
// 加载更多数据。
},
toTop: {
btnTxt: "回到顶部",
isHide: true
}
}
});
// 显示回到顶部按钮
mescroll.showTopBtn();
// 隐藏回到顶部按钮
mescroll.hideTopBtn();
（3）跳转页面
在Mescroll.js中，我们可以通过跳转页面的方式来实现上拉加载。
var mescroll = new Mescroll('mescroll', {
up: {
use: true,
page: {
num: 0,
size: 10
},
toPage: true,
next: function(page){
// 跳转到指定页面
window.location.href = '/data.html?page=' + page.num + '&size=' + page.size;
}
}
});
在这个例子中，我们通过设置toPage属性为true，来启用跳转页面的方式来实现上拉加载更多。
4. 状态管理和回调函数
Mescroll.js支持状态管理和回调函数，让用户能够更加方便地监控组件状态和响应事件。
（1）状态管理
Mescroll.js可以管理多个状态，并提供了一系列的状态管理方法，比如endBySize，endSuccess和endErr等。
var mescroll = new Mescroll('mescroll', {
up: {
auto : true,
callback: function(page){
// 加载更多数据。
}
}
});
// 完成加载
mescroll.endBySize(20, true);
在这个例子中，我们通过调用endBySize函数，告诉Mescroll组件数据加载完成，并显示出相应的状态。
（2）回调函数
Mescroll.js提供了各种回调函数来让你响应各种事件，用于处理和扩展功能。
var mescroll = new Mescroll('mescroll', {
up: {
auto: true,
callback: function(page){
// 加载更多数据。
},
onScroll: function(e){
// 滚动时回调函数
},
onScrollEnd: function(e){
// 滚动结束后回调函数
}
}
});
在这个例子中，我们通过设置onScroll和onScrollEnd回调函数，来监控滚动事件和滚动结束事件，用于处理和扩展功能。
