プロジェクトのフロントエンドページに購入した製品が表示される場合、プルダウンしてさらに読み込むことができる必要があります。 「さらに読み込む」機能の実装方法については、iscroll.js を使用して実装されたよく知られた「さらに読み込む」プルアップ機能や更新機能を実行するプルダウンなど、オンラインで入手できるプラグインがあります。
でも、実際に使うのは非常に面倒です。サードパーティ製のプラグインなので、相手が決めた方法に従って使用する必要があり、いつも非常に使い心地が悪いです。また、iscroll.js 自体にはこれ以上の機能は統合されていないため、独自に拡張する必要があります。 iscroll.js を引き続き使用してさらに多くの関数をロードしたい場合は、上記のリンクをチェックしてください。
h5プロジェクトは、モバイル端末なので、PC側でページめくりをするのではなく、「Load More」の使用を検討した方が良いでしょう。
ボタンに基づいてさらにロードする
最も簡単な方法は、データがまだある場合はクリックしてさらにロードし、データがなくなるまでいくつかのデータを取得し続け、ロードを非表示にすることです。さらにボタンをクリックします。
効果は次のとおりです:
ページ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 番目の例の方が優れていることは明らかであり、クリックする必要はありません。しかし、2 番目の方法には問題があります:
毎回 2 つまたは 3 つのアイテムを表示するようにページ サイズを設定し (size=2)、合計レコードが 20 の場合、次のロジックをトリガーできないことがわかります。さらに読み込むには下にスクロールしてください。現時点では、さらに読み込むためのクリックボタンがあると便利です。
したがって、上記の 2 つの方法を組み合わせることができます:
デフォルトでは、さらに読み込むためにスクロール イベントが使用されます。表示数が小さすぎて、さらに読み込むために下にスクロールするロジックをトリガーできない場合は、「Load More Clicks」イベントを使用します。
ここでは、さらに読み込む動作を単純に抽象化し、簡単なプラグインを作成しました:
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!');
}
});
}
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
