上拉加載的實現思路其實很簡單：
1.移動端觸發touchmove事件(上拉)
2.判斷最后一個元素是否已出現在底部
3.若出現，則js添加元素到頁面末尾
思路圖：
接下來開始編寫style樣式：
html,body{
margin: 0px;
width: 100%;
height: 100%;
}
li{
list-style: none;
}
#personkit_article_ul{
width: 100%;
position: relative;
-webkit-padding-start:0;
-webkit-margin-before:0;
-webkit-margin-after:0;
}
.pin{
/*width: 100%;*/
height: 90px;
background-color: #eee;
padding: 6px 8px;
position: relative;
border-bottom: 1px solid #fff;
}
.personkit-article__img{
width: 116px;
height: 90px;
}
.personkit-article__img img{
width: 100%;
height: 100%;
}
.personkit-article__info{
position: absolute;
left: 130px;
top: 0px;
padding: 0px 8px;
}
.personkit-article__title{
line-height: 0px;
}
/*多行文本溢出作省略處理*/
.personkit-article__info p{
display: -webkit-box;
overflow: hidden;
text-overflow:ellipsis;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
}
.bottom-line{
text-align: center;
background-color: #eee;
}
html結構：
<section id="item">
<ul id="personkit_article_ul">
<li class="pin">
<div class="personkit-article__img">
<img src="../public/imgs/4.png" alt="">
</div>
<div class="personkit-article__info">
<h3 class="personkit-article__title">關於保健的一本書</h3>
<p>原來保健是這樣的啊原來保健是這樣的啊原來保健是這樣的啊原來保健是這樣的啊</p>
</div>
</li>
<li class="pin">
<div class="personkit-article__img">
<img src="../public/imgs/4.png" alt="">
</div>
<div class="personkit-article__info">
<h3 class="personkit-article__title">關於保健的一本書</h3>
<p>原來保健是這樣的啊原來保健是這樣的啊原來保健是這樣的啊原來保健是這樣的啊</p>
</div>
</li>
<li class="pin">
<div class="personkit-article__img">
<img src="../public/imgs/4.png" alt="">
</div>
<div class="personkit-article__info">
<h3 class="personkit-article__title">關於保健的一本書</h3>
<p>原來保健是這樣的啊原來保健是這樣的啊原來保健是這樣的啊原來保健是這樣的啊</p>
</div>
</li>
<li class="pin">
<div class="personkit-article__img">
<img src="../public/imgs/4.png" alt="">
</div>
<div class="personkit-article__info">
<h3 class="personkit-article__title">關於保健的一本書</h3>
<p>原來保健是這樣的啊原來保健是這樣的啊原來保健是這樣的啊原來保健是這樣的啊</p>
</div>
</li>
<li class="pin">
<div class="personkit-article__img">
<img src="../public/imgs/4.png" alt="">
</div>
<div class="personkit-article__info">
<h3 class="personkit-article__title">關於保健的一本書</h3>
<p>原來保健是這樣的啊原來保健是這樣的啊原來保健是這樣的啊原來保健是這樣的啊</p>
</div>
</li>
<li class="pin">
<div class="personkit-article__img">
<img src="../public/imgs/4.png" alt="">
</div>
<div class="personkit-article__info">
<h3 class="personkit-article__title">關於保健的一本書</h3>
<p>原來保健是這樣的啊原來保健是這樣的啊原來保健是這樣的啊原來保健是這樣的啊</p>
</div>
</li>
</ul>
<div class="bottom-line"></div>
</section>
js是用zepto.js庫實現的：
<script src="../public/zepto.js"></script>
;(
function
(){
$(
'#personkit_article_ul'
).on(
'touchmove'
,
function
(){
//判斷最后一個元素是否在底部之上
if
( $(
'.pin'
).eq($(
'.pin'
).length-1).offset().top-$(window).scrollTop() < $(window).height() ){
$(
'.bottom-line'
).css(
'display'
,
'block'
).text(
'正在刷新...'
);
checkPull();
}
});
//添加元素方法
function
checkPull(){
var
pinNew;
pinNew=document.createDocumentFragment();
//每次添加5條內容
for
(
var
j=5;j>0;j--){
var
li=document.createElement(
'li'
);
li.className=
"pin"
;
li.innerHTML=
'<div class="personkit-article__img"><img src="../public/imgs/4.png" alt=""></div><div class="personkit-article__info"><h3 class="personkit-article__title">關於保健的一本書</h3><p>原來保健是這樣的啊原來保健是這樣的啊原來保健是這樣的啊原來保健是這樣的啊</p></div>'
;
pinNew.appendChild(li);
}
$(
'#personkit_article_ul'
)[0].appendChild(pinNew);
}
})();
這個效果是模擬移動端，測試時可使用谷歌瀏覽器——郵件——審查元素，點擊上面已圈點的地方可看到效果
本文來自轉載。