ListLoadingは、モバイルプルアップとプルダウンのロードにより多くのコンポーネントです。主にiscroll.js v5.1.2に基づいて開発されたコンポーネントに依存しています。基本的なライブラリは、jquery.jsまたはzepto.jsを使用してDOMノードを操作できます。現在、Zepto.jsを基本ライブラリとして使用してDOMを操作し、jQueryプラグインの形で存在しています。プラグインとして使用したくない場合は、リストロードを必要なライブラリに直接移植するだけで問題ありません。リストロードは、主にモバイル端子向けに設計されています。ブラウザを使用する場合、スクロールが付属しています。ユーザーエクスペリエンスは非常に友好的で、AndroidやiOSとは大きく異なります。したがって、iscroll.jsを選択します。その実装方法は、CSS3アニメーション翻訳2D変換を使用して、スクロール効果を実現することです。変換属性はハードウェアアクセラレーションを使用し、パフォーマンス方法が大幅に改善されました。
NPMインストール
コードコピーは次のとおりです。
NPMインストール-Gリストロード
それを使用する方法は次のとおりです。
1。HTML構造
作成されたiScrollと同じ構造ですが、指定された作成された要素ノードは、コンポーネントのサブスクリプションモードを公開するために識別可能なIDが必要であるため、IDを指定する必要があります。 IsCrollは、ノード要素が作成される前に高さを設定する必要があるため、それ以外の場合はスクロール可能ではありません。 IsCrollは作成され、スクロールする最初の子要素に割り当てられているため、リストロードのプルアップとドロップダウンの更新も最初の子要素に追加されます。実際、HTMLの身体として最初の子要素を想像してください。
2。導入する必要があるJS
<Script src = "../ src/jslib/zepto.min.js"> </script> <script src = "../ src/jslib/iscroll.js"> </script> <scrits src = "../ build/listloading.js"> </script>
3。呼び出し
var m = 3、n = 0; // iscrollを作成する前に親要素の高さを設定する必要があります。そうしないと、iscroll $（ '＃listloading'）。高（$（window）.height（））; //テンプレートまたはajax要求方法var createhtml = function（）{var __html = ''; date（）。gettime（）; now = new date（now + i*1000000）; __ html + = '<li> <span> </span> <p> <time>' + now.gethours（） + ' + now.getminutes（） +'： ' + now.getSeconds（） +' </time> pupl-pupl） +（n + exp> pulp> pulpコンポーネント... </li> ';} return __html;} //セレクターは、識別子var listloading = $（'＃listloading '）として公開サブスクリプションを使用する必要があるため、IDである必要があります。 createhtml（）; if（m <1）{flg = true;} else {$（ '＃order-list'）。append（__ html）;} //データがロードされた後、すべてのデータがcb（flg）;}、pulldownaction：cb）{cb）{// createhtml（）; $（ '＃order-list'）。バブル、クリック方法自体を書くこともお勧めします。 PreventDefaultをfalseに有効にすると、この行はOnclickの障害の問題を解決します。ただし、この値を開いてWeChatの下でドラッグすると、問題が発生します。スライドが終了した後、スクロールをトリガーできません。だから私はイベントメソッドを自分で埋め込みましたlistloading.evt（ 'li'、 'click'、function（dom）{// dom.remove（）; // $（ '＃order-list'）。複製図
/p>
4。API
4.1プルダウンして更新します
初期化は、主にisCrollを作成するために1回実行され、各プルダウンの更新が各プルダウンの更新の終了後に実行されます。メソッドでプログラムを実行した後、実行されたすべてのプログラムを通知するためにコールバック関数を実行する必要があります。リストロードは、iScroll Refresh関数を自動的に呼び出し、コールバックはパラメーター送信を必要としません。
options.pulldownaction = function（cb）{//プルダウンして更新.... //実行方法を実行した後、callback cb（）を実行する必要があります;}4.2プルアップリフレッシュ
各プルアップリフレッシュは、更新が完了した後に実行されます。プログラムを実行した後、コールバック関数を実行するのにも同じことが必要です。コールバックではブール値が必要です。それが本当なら、なぜそれがロードされ、最後まで引っ張られたのか。
options.pullupaction = function（cb）{//プルダウンの更新.... //実行方法を実行した後、コールバックはcb（true）;}にプルダウンするために真実でなければなりません。4.3リストロードを破壊します
コードコピーは次のとおりです。
listloading.destroy（）;
4.4リストロードの更新
スクロールエリアノードに追加と削除がある場合は、操作が完了した後にこのメソッドを呼び出す必要があります。
コードコピーは次のとおりです。
listloading.refresh（）;
4.5時間を表示するかどうかのデフォルト値がfalse
真のプルダウンは、時間、最後の更新からの時間を表示します
コードコピーは次のとおりです。
options.disabletime = true
4.6テキストを更新するためにプルアップします
コードコピーは次のとおりです。
options.uploadmoretxt = 'プルアップしてテキストを更新します'; // HTMLタグを入れることができます
4.7プルダウンしてテキストを更新します
コードコピーは次のとおりです。
options.pulldrefreshtxt = 'ドラッグダウンしてテキストを更新します'; // HTMLタグを入れることができます
4.8漢字のロード
コードコピーは次のとおりです。
options.loadertxt = '漢字は読み込まれています'; // HTMLタグを入れることができます
4.9リリース更新テキスト
コードコピーは次のとおりです。
options.realtimetxt = 'リリース更新テキスト'; // HTMLタグを内部に配置できます
4.10すべてのテキストがロードされています
コードコピーは次のとおりです。
options.loaderendtxt = 'すべてのテキストがロードされました'; // HTMLタグを入れることができます
4.12 ISCROLL構成
コードコピーは次のとおりです。
options.iscrolloptions = {};
上記はlistloading.jsモバイル端末プルダウンリフレッシュコンポーネントがエディターによって導入されました。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！