js는 더 많은 함수 인스턴스 로드를 구현합니다.
- 高洛峰원래의
- 2016-12-08 15:23:042186검색
프로젝트의 프런트엔드 페이지에 구매한 제품이 표시되는 경우, 더 많은 제품을 로드하려면 아래로 당겨야 합니다. "더 보기" 기능을 구현하는 방법에 대해서는 iscroll.js를 사용하여 구현된 잘 알려진 더 보기 풀업 및 새로 고침 기능을 위한 풀다운과 같은 온라인에서 사용할 수 있는 플러그인이 있습니다.
그러나 실제로 사용하기에는 매우 번거롭습니다. 타사 플러그인이기 때문에 상대방이 정의한 방법에 따라 사용해야 하는데, 항상 사용하기가 매우 불편합니다. 또한, iscroll.js 자체에는 더 많은 기능이 통합되어 있지 않으며 자체적으로 확장이 필요합니다. iscroll.js를 계속 사용하여 더 많은 기능을 로드하려면 위에 제공된 링크를 확인하세요.
h5 프로젝트에서는 간단한 페이징 기능을 구현해야 하는데, 모바일 단말이기 때문에 PC측에서 페이지를 넘기는 것보다는 "더보기"를 활용하는 것을 고려해 보시는 것이 좋을 것 같습니다.
버튼 기반 추가 로드
가장 간단한 방법은 추가 로드 버튼을 제공하는 것입니다. 아직 데이터가 있으면 클릭하여 추가 로드하고 몇 가지 데이터를 계속 가져옵니다. 더 이상 데이터가 없을 때까지 데이터가 너무 많으면 추가 로드 버튼을 숨깁니다.
효과는 다음과 같습니다:
페이지 html:
<div class="content">
<div class="weui_panel weui_panel_access">
<div class="weui_panel_hd">文章列表</div>
<div class="weui_panel_bd js-blog-list">
</div>
</div>
<!--加载更多按钮-->
<div class="js-load-more">加载更多</div>
</div>
<script src="js/zepto.min.js"></script>추가 버튼 스타일 로드: loadmore.css :
@charset "utf-8";
.js-load-more{
padding:0 15px;
width:120px;
height:30px;
background-color:#D31733;
color:#fff;
line-height:30px;
text-align:center;
border-radius:5px;
margin:20px auto;
border:0 none;
font-size:16px;
display:none;/*默认不显示，ajax调用成功后才决定显示与否*/
}더 많은 js 코드 로드:
$(function(){
/*初始化*/
var counter = 0; /*计数器*/
var pageStart = 0; /*offset*/
var pageSize = 4; /*size*/
/*首次加载*/
getData(pageStart, pageSize);
/*监听加载更多*/
$(document).on('click', '.js-load-more', function(){
counter ++;
pageStart = counter * pageSize;
getData(pageStart, pageSize);
});
});여기에는 코드가 많지 않습니다. 그 중 getData(pageStart, pageSize)는 서버에서 데이터를 가져오는 역할을 하는 비즈니스 로직 코드입니다. 예를 들면 다음과 같습니다.
function getData(offset,size){
$.ajax({
type: 'GET',
url: 'json/blog.json',
dataType: 'json',
success: function(reponse){
var data = reponse.list;
var sum = reponse.list.length;
var result = '';
/****业务逻辑块：实现拼接html内容并append到页面*********/
//console.log(offset , size, sum);
/*如果剩下的记录数不够分页，就让分页数取剩下的记录数
* 例如分页数是5，只剩2条，则只取2条
*
* 实际MySQL查询时不写这个不会有问题
*/
if(sum - offset < size ){
size = sum - offset;
}
/*使用for循环模拟SQL里的limit(offset,size)*/
for(var i=offset; i< (offset+size); i++){
result +='<div class="weui_media_box weui_media_text">'+
'<a href="'+ data[i].url +'" target="_blank"><h4 class="weui_media_title">'+ data[i].title +'</h4></a>'+
'<p class="weui_media_desc">'+ data[i].desc +'</p>'+
'</div>';
}
$('.js-blog-list').append(result);
/*******************************************/
/*隐藏more按钮*/
if ( (offset + size) >= sum){
$(".js-load-more").hide();
}else{
$(".js-load-more").show();
}
},
error: function(xhr, type){
alert('Ajax error!');
}
});
}여전히 비교적 간단합니다.
스크롤 이벤트 기반 추가 로드
위에서는 버튼을 클릭하여 추가 로드를 구현했으며 전체적인 프로세스는 비교적 간단합니다. 여기에서는 스크롤 이벤트를 기반으로 더 많은 것을 로드하는 또 다른 방법을 제공합니다.
코드를 직접 붙여넣었습니다:
$(function(){
/*初始化*/
var counter = 0; /*计数器*/
var pageStart = 0; /*offset*/
var pageSize = 7; /*size*/
var isEnd = false;/*结束标志*/
/*首次加载*/
getData(pageStart, pageSize);
/*监听加载更多*/
$(window).scroll(function(){
if(isEnd == true){
return;
}
// 当滚动到最底部以上100像素时， 加载新内容
// 核心代码
if ($(document).height() - $(this).scrollTop() - $(this).height()<100){
counter ++;
pageStart = counter * pageSize;
getData(pageStart, pageSize);
}
});
});코드가 크게 변경되지 않았음을 알 수 있습니다. 주로 핵심 코드의 판단 조건에 따라 달라집니다. 하단에서 100픽셀, 새 콘텐츠를 로드합니다.
비즈니스 로직 getData(pageStart, pageSize)는 if((offset + size) >= sum)의 로직을
if ( (offset + size) >= sum){
isEnd = true;//没有更多了
}으로 변경하기만 하면 됩니다.
물론 다음과 같이 최적화해야 할 영역이 아직 남아 있습니다. 서버가 응답할 시간을 갖기 전에 서버가 너무 빠르게 스크롤하여 여러 요청을 발생시키는 것을 방지하는 방법은 무엇입니까?
종합예
위의 예를 보면 클릭하지 않고도 두 번째가 더 낫다는 것은 명백합니다. 하지만 두 번째 방법에는 문제가 있습니다.
매번 2~3개의 항목이 표시되도록 페이지 크기를 설정하고(size=2) 총 레코드가 20개이면 다음과 같은 결과가 나타납니다. 더 많은 로직을 로드하기 위해 아래로 스크롤할 수는 없습니다. 이때 더 많은 것을 로드하려면 클릭 버튼이 있으면 좋을 것 같습니다.
따라서 위의 두 가지 방법을 결합할 수 있습니다.
기본적으로 스크롤 이벤트를 사용하여 더 많이 로드합니다. 표시된 숫자가 너무 작으면 트리거하기에 충분하지 않습니다. 더 많은 로직을 로드하려면 아래로 스크롤하세요. 더 많은 로직이 있으면 더 많은 클릭 이벤트를 사용하여 로드하세요.
여기서는 more를 로드하는 동작을 간단히 추상화하고 간단한 플러그인을 작성했습니다.
loadmore.js
/*
* loadmore.js
* 加载更多
*
* @time 2016-4-18 17:40:25
* @author 飞鸿影~
* @email jiancaigege@163.com
* 可以传的参数默认有：size,scroll 可以自定义
* */
;(function(w,$){
var loadmore = {
/*单页加载更多 通用方法
*
* @param callback 回调方法
* @param config 自定义参数
* */
get : function(callback, config){
var config = config ? config : {}; /*防止未传参数报错*/
var counter = 0; /*计数器*/
var pageStart = 0;
var pageSize = config.size ? config.size : 10;
/*默认通过点击加载更多*/
$(document).on('click', '.js-load-more', function(){
counter ++;
pageStart = counter * pageSize;
callback && callback(config, pageStart, pageSize);
});
/*通过自动监听滚动事件加载更多,可选支持*/
config.isEnd = false; /*结束标志*/
config.isAjax = false; /*防止滚动过快，服务端没来得及响应造成多次请求*/
$(window).scroll(function(){
/*是否开启滚动加载*/
if(!config.scroll){
return;
}
/*滚动加载时如果已经没有更多的数据了、正在发生请求时，不能继续进行*/
if(config.isEnd == true || config.isAjax == true){
return;
}
/*当滚动到最底部以上100像素时， 加载新内容*/
if ($(document).height() - $(this).scrollTop() - $(this).height()<100){
counter ++;
pageStart = counter * pageSize;
callback && callback(config, pageStart, pageSize);
}
});
/*第一次自动加载*/
callback && callback(config, pageStart, pageSize);
},
}
$.loadmore = loadmore;
})(window, window.jQuery || window.Zepto);어떻게 사용하나요? 간단합니다.
$.loadmore.get(getData, {
scroll: true, //默认是false,是否支持滚动加载
size:7, //默认是10
flag: 1, //自定义参数，可选，示例里没有用到
});첫 번째 매개변수는 비즈니스 로직인 콜백 함수입니다. 최종 수정된 비즈니스 로직 메소드를 게시했습니다:
function getData(config, offset,size){
config.isAjax = true;
$.ajax({
type: 'GET',
url: 'json/blog.json',
dataType: 'json',
success: function(reponse){
config.isAjax = false;
var data = reponse.list;
var sum = reponse.list.length;
var result = '';
/************业务逻辑块：实现拼接html内容并append到页面*****************/
//console.log(offset , size, sum);
/*如果剩下的记录数不够分页，就让分页数取剩下的记录数
* 例如分页数是5，只剩2条，则只取2条
*
* 实际MySQL查询时不写这个
*/
if(sum - offset < size ){
size = sum - offset;
}
/*使用for循环模拟SQL里的limit(offset,size)*/
for(var i=offset; i< (offset+size); i++){
result +='<div class="weui_media_box weui_media_text">'+
'<a href="'+ data[i].url +'" target="_blank"><h4 class="weui_media_title">'+ data[i].title +'</h4></a>'+
'<p class="weui_media_desc">'+ data[i].desc +'</p>'+
'</div>';
}
$('.js-blog-list').append(result);
/*******************************************/
/*隐藏more*/
if ( (offset + size) >= sum){
$(".js-load-more").hide();
config.isEnd = true; /*停止滚动加载请求*/
//提示没有了
}else{
$(".js-load-more").show();
}
},
error: function(xhr, type){
alert('Ajax error!');
}
});
}