Kata pengantar
Pada bagian sebelumnya, ada proyek seluler yang perlu menggunakan penyegaran pull-down dan memuat lebih banyak efek. Refleksi pertama dalam pikiran saya adalah efek Weibo. Pada awalnya, saya memiliki beberapa penyimpangan dalam pemahaman saya. Saya pikir pull-down juga merupakan data yang ditambahkan, dan pull-up adalah data yang ditambahkan. Kemudian, saya bertanya kepada rekan-rekan saya dan mengetahui bahwa pull-down hanyalah penyegaran data terbaru, dan pull-up adalah data yang ditambahkan.
Tip Penggunaan
1. Rujuk ke isCroll.js dan tambahkan dua acara mendengarkan selama inisialisasi: TouchMove dan DomContentloaded.
2. Menerapkan acara OnScrollend dari plug-in isCroll, yaitu, dalam acara ini, hubungi metode AJAX Anda sendiri untuk menyegarkan dan menambahkan data.
3. Saat menarik dan memuat lebih banyak permintaan di latar belakang, itu setara dengan data permintaan paging. Pada saat ini, parameter PageIndex perlu dikirim selama permintaan AJAX, dan ketika menginisialisasi pemuatan, pagecount perlu dikembalikan dari latar belakang agar latar depan untuk menilai.
4. Yang paling penting adalah mengimplementasikan metode Pulldown Refresh (PullDownaction) dan Metode Pullup Load More (PullUpaction).
Diagram efek berjalan
Metode implementasi
var myscroll, pulldownel, pulldownoffset, pullupel, pullupoffset, generedcount = 0;/** * pull-down refresh (sesuaikan metode ini) * myscroll.refresh (); Setelah data dimuat, panggil metode pembaruan antarmuka */function pullDownaction () {setTimeout (function () {var el, li, i; el = document.geteLementById ('thelist'); untuk (i = 0; i <3; i ++) {li = document.createelement ('li'); li.innertext = 'genered (liered' generCeelement ('li'); li.innerText = 'Generated (liromer') GENERATED ('Li'); li.innerText = 'Genered (Document. el.childnodes [0]);} myscroll.refresh (); }/** * Gulir dan putar halaman (sesuaikan metode ini) * myscroll.refresh (); // Setelah pemuatan data, panggil metode pembaruan antarmuka*/fungsi pullupaction () {setTimeout (function () {// <- simulasikan kemacetan jaringan, hapus setTimeout dari produksi! Var el, li, i; el = document.geteLementById ('thelist'); untuk (i = 0; i <3; i <3; i ++) {li = document '); for (i = 0; i <3; i <3; i <3; i ++) {li = document. (++ GeneredCount); }/*** Inisialisasi kontrol isCroll*/function dimuat () {pullDownel = document.getElementById ('pullDown'); PullDownOffset = PullDownel.OffsetHeight; pullupel = document.geteLementById ('pullup'); pullupoffset = pullupel.offsetHeight; myscroll = new isCroll ('wrapper', {scrollbarclass: 'myscrollbar', useTransition: false, topoffset: pullDownoffset, onrefresh: function () {if (pullDownel.classname.match ('loading')) {pulldownel.classname = ''; PullDownel.QuerySelector ('. PullDownLabel'). InnerHtMl = 'Pulldown Refresh ...'; ) {if (this.y> 5 &&! Puldownel.classname.match ('flip')) {PullDownel.className = 'flip'; PullDownel.className.match ('flip')) {PullDownel.className = ''; ! Pullupel.classname.match ('flip')) {pullupel.classname = 'flip'; pullupel.classname.match ('flip')) {pullupel.classname = ''; PullDownel.ClassName = 'Loading'; Pullupel.QuerySelector ('. Pulluplabel'). InnerHTML = 'Loading ...'; setTimeout (function () {document.geteLementById ('wrapper'). style.left = '0';}, 800);} // menginisialisasi dokumen kontrol isCroll yang mengikat.addeventListener ('faleme', fale (e) {e.preventDefault ();}, false.added); falemy ';Meringkaskan
Hal utama adalah melakukan beberapa operasi inisialisasi pada isCroll, menampilkan informasi cepat yang berbeda untuk tindakan yang berbeda, dan kemudian menulis refresh yang sesuai dan memuat lebih banyak metode pemrosesan untuk acara pull-down dan pull-up.