这是本人尝试手写的一个基于jq uery 的插件
测试结构代码如下:(index.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>移动端的分页功能</
title>
<
style>
* {
padding:
0;
margin:
0;
}
html,
body {
width:
100
%;
height:
100
%;
/* overflow: hidden; */
}
.box {
width:
100
%;
height:
100
%;
display:
flex;
flex-direction:
column;
}
.box
p {
height:
40
px;
line-height:
40
px;
text-align:
center;
}
.box
.container {
flex-grow:
1;
}
.box
.container
ul {
}
.box
.container
ul
li {
height:
40
px;
line-height:
40
px;
border-top:
1
px
solid
#ccc;
border-bottom:
1
px
solid
#ccc;
text-align:
center;
}
</
style>
</
head>
<
body>
<
div
class=
"box">
<
p>下面是分页功能测试</
p>
<
div
class=
"container">
<
ul>
<
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>
<
li>11</
li>
<
li>12</
li>
<
li>13</
li>
<
li>14</
li>
<
li>15</
li>
<
li>16</
li>
<
li>17</
li>
<
li>18</
li>
<
li>19</
li>
<
li>20</
li>
<
li>21</
li>
<
li>22</
li>
</
ul>
</
div>
</
div>
<
script
src=
"./jquery.js"></
script>
<
script
src=
"./pagging.js"></
script>
<
script>
var obj
= {
template:
'<p>你好</p>',
el:
'.container ul',
refreshLength:
50,
//距离底部多高刷新页面
}
Pagging(obj);
</
script>
</
body>
</
html>
js(插件)代码如下:
(
function(
$){
var pageHeight;
var scrollHeight;
var scrollTop;
var refresh;
//距离底部多高刷新
var $ulEle;
//ul 增加 dom 的容器
var
Pagging
=
function(
obj){
//判断是用函数创建的还是用new创建的。这样我们就可以通过MaskShare("dom") 或 new MaskShare("dom")来使用这个插件了
if(
!(
this
instanceof Pagging)){
// var defaultObj = {
// template: '<p>你好</p>',
// el: '.container ul',
// refreshLength: 50, //距离底部多高刷新页面
// }
return
new
Pagging(obj);
}
//初始化
this.
_init(obj);
}
Pagging.prototype
= {
_init:
function(
obj){
this.
extend(obj)
//初始化数据
this.
initData(obj);
//绑定事件
this.
bindEvent(
this.dataObj);
},
initData:
function(
obj){
refresh
= obj.refreshLength;
},
extend:
function(
obj){
var dataObj
= {};
for(key
in obj){
dataObj[key]
= obj[key]
}
this.dataObj
= dataObj;
},
bindEvent:
function(
obj){
var that
=
this;
$(
'.container').
on(
'touchstart',
function(){
pageHeight
=
$(window).
height();
scrollHeight
=
$(document).
height();
scrollTop
=
$(window).
scrollTop();
console.
log(
'start')
});
$(
'.container').
on(
'touchmove',
function(){
if(scrollHeight
> pageHeight){
if(scrollHeight
- scrollTop
- pageHeight
< refresh){
//加载数据
that.
drawPage(obj)
}
}
});
$(
'.container').
on(
'touchend',
function(){
console.
log(
'end')
});
},
drawPage:
function(
obj){
console.
log(
JSON.
stringify(obj))
var $dom
=
$(obj.el);
$dom.
append(obj.template);
}
}
//暴露全局变量
window.Pagging
= Pagging
})($)
教程: 在引入了这个jquery和这个js 文件之后,使用方式:
var obj
= {
template:
'<p>你好</p>',
//要渲染的页面结构
el:
'.container ul',
//页面荣区,盛放要被渲染的几条狗
refreshLength:
50,
//距离底部多高刷新页面
}
new
Pagging(obj);
这样就ok了,欢迎各个大神一起讨论学习