ListLoading adalah pull-up seluler dan memuat lebih banyak komponen. Ini terutama bergantung pada komponen yang dikembangkan berdasarkan isCroll.js v5.1.2. Perpustakaan dasar dapat menggunakan jQuery.js atau zepto.js untuk mengoperasikan simpul DOM. Saat ini, saya menggunakan Zepto.js sebagai perpustakaan dasar untuk mengoperasikan DOM, dan ada dalam bentuk plug-in jQuery. Jika Anda tidak ingin menggunakannya sebagai plug-in, Anda hanya perlu secara langsung port listloading ke perpustakaan yang Anda butuhkan, tidak apa-apa. ListLoading terutama dirancang untuk terminal seluler. Saat menggunakan browser, ia datang dengan pengguliran. Pengalaman pengguna sangat tidak ramah dan sangat berbeda dari Android dan iOS. Oleh karena itu, ia memilih isCroll.js. Metode implementasinya adalah menggunakan CSS3 Animation Translate 2D Conversion untuk mencapai efek pengguliran. Atribut Transform menggunakan akselerasi perangkat keras, dan metode kinerja telah sangat ditingkatkan.
Instalasi NPM
Salinan kode adalah sebagai berikut:
NPM Instal -G ListLoading
Cara menggunakannya adalah sebagai berikut:
1. Struktur HTML
Struktur yang sama dengan isCroll yang dibuat, tetapi simpul elemen yang dibuat yang ditentukan harus menentukan ID, karena identitas yang dapat diidentifikasi diperlukan untuk menerbitkan mode berlangganan dalam komponen. Karena isCroll harus mengatur ketinggian sebelum elemen simpul dibuat, jika tidak, itu tidak akan dapat digulir; IsCroll dibuat dan ditugaskan ke elemen anak pertama yang menggulir, sehingga penyegaran listloading pull-up dan drop-down juga ditambahkan ke elemen anak pertama. Bahkan, bayangkan saja elemen anak pertama sebagai tubuh di HTML.
2. Js yang perlu diperkenalkan
<script src = "../ src/jslib/zepto.min.js"> </script> <script src = "../ src/jslib/isCroll.js"> </script> <script src = "../ build/listloing.js"> </script>
3. Panggilan
var m = 3, n = 0; // Anda harus mengatur ketinggian elemen induk sebelum membuat isCroll, jika tidak Anda tidak dapat menyeret isCroll $ ('#listloading'). Tinggi ($ (window) .height ()); // Template atau Metode Permintaan AJAX var createHtml = function () {var __html = ''; Date (). GetTime (); sekarang = Tanggal baru (sekarang + i*1000000); __ html + = '<li> <span> </span> <p> <lime>' + now.getHours () + ':' + now.getMinutes () + ': now.getSeconds () +' </time.getMinutes () + ': now.getSeconds () +' </time-time-up 'download' Komponen ... </li> ';} return __html;} // Pemilih harus ID karena perlu menggunakan langganan publikasi sebagai pengidentifikasi var listloading = $ ('#listloading '). ListLoading ({disabletime: true, // apakah akan menampilkan waktu yang diperlukan diperlukan pullupaction: function (cb) {//pull-up; createHtml (); if (m <1) {flg = true;} else {$ ('#order-list'). append (__ html);} // Setelah data dimuat, perlu untuk mengembalikan akhir {3; createHTML (); $ ('#order-list'). HTML (__ html); // Setelah metode eksekusi dieksekusi, panggilan balik harus dieksekusi. Gelembung, ini juga merekomendasikan untuk menulis metode klik dengan sendirinya. Jika Anda mengaktifkan preventdefault menjadi false, baris ini akan menyelesaikan masalah kegagalan onsklick. Namun, jika Anda membuka nilai ini dan menyeretnya di bawah WeChat, akan ada masalah. Setelah slide berakhir, scrollend tidak dapat dipicu. Jadi saya menyematkan metode acara sendiri listloading.evt ('li', 'click', function (dom) {// dom.remove (); // $ ('#order-list'). Append (createHtml ()); // listloading.refresh ();});Diagram reproduksi
/p>
4. API
4.1 Tarik ke bawah untuk menyegarkan
Inisialisasi akan dieksekusi sekali, terutama untuk membuat iscroll, dan kemudian setiap penyegaran pull-down dieksekusi setelah akhir setiap penyegaran pull-down. Setelah pelaksanaan program Anda dalam metode ini, fungsi callback perlu dieksekusi untuk menginformasikan semua program yang telah dieksekusi, listloading akan secara otomatis memanggil fungsi refresh isCroll, dan callback tidak memerlukan transmisi parameter.
options.pulldownaction = function (cb) {// Tarik ke bawah untuk menyegarkan .... // Setelah menjalankan metode eksekusi, callback cb () harus dijalankan;}4.2 Pull-up Refresh
Setiap penyegaran pull-up dieksekusi setelah penyegaran selesai. Hal yang sama diperlukan untuk menjalankan fungsi panggilan balik setelah menjalankan program Anda. Nilai boolean diperlukan dalam panggilan balik. Jika itu benar, mengapa itu dimuat dan telah ditarik ke akhir.
options.pullupaction = function (cb) {// Pull-down refresh .... // Setelah menjalankan metode eksekusi, panggilan balik harus benar untuk menarik ke bawah ke ujung CB (true);}4.3 Hancurkan ListLoading
Salinan kode adalah sebagai berikut:
listloading.destroy ();
4.4 Refresh Listloading
Jika ada penambahan dan penghapusan di simpul area pengguliran, Anda perlu memanggil metode ini setelah operasi selesai.
Salinan kode adalah sebagai berikut:
listloading.refresh ();
4.5 Apakah akan menampilkan nilai default waktu itu salah
True Pull-Down menampilkan waktu, waktu dari penyegaran terakhir
Salinan kode adalah sebagai berikut:
option.disableTime = true
4.6 Tarik untuk menyegarkan teks
Salinan kode adalah sebagai berikut:
options.UploadMoretxt = 'Tarik untuk menyegarkan teks'; // Anda dapat memasukkan tag html di dalamnya
4.7 Tarik ke bawah untuk menyegarkan teks
Salinan kode adalah sebagai berikut:
options.pulldrefreshtxt = 'seret ke bawah untuk menyegarkan teks'; // Anda dapat memasukkan tag html di dalamnya
4.8 Memuat karakter Cina
Salinan kode adalah sebagai berikut:
options.loaderTxt = 'karakter Cina sedang memuat'; // Anda dapat memasukkan tag html di dalamnya
4.9 Rilis Teks Refresh
Salinan kode adalah sebagai berikut:
options.RealTimetxt = 'Release Refresh Text'; // Anda dapat memasukkan tag HTML di dalam
4.10 Semua teks telah dimuat
Salinan kode adalah sebagai berikut:
options.loaderEndTxt = 'Semua teks telah dimuat'; // Anda dapat memasukkan tag html di dalamnya
4.12 Konfigurasi isCroll
Salinan kode adalah sebagai berikut:
options.iscrollOptions = {};
Di atas adalah komponen refresh terminal mobile listloading.js yang diperkenalkan oleh editor. Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!