Kata pengantar
Dalam karya dua bab sebelumnya, kami berhasil menerapkan rendering halaman beranda, tetapi itu hanya membuat satu halaman data. Kita mungkin perlu membuat lebih banyak data, jadi saat ini, perlu bagi kita untuk mempertimbangkan paging.
Ada banyak cara untuk paging, seperti pemuatan asinkron. Namun, untuk teman-teman yang tidak menggunakan kerangka kerja templat front-end, mungkin agak sulit untuk menggunakan metode ini segera setelah mereka mulai. Oleh karena itu, implementasi paging bab kami didasarkan pada paging tautan biasa.
Setelah kami memiliki lebih banyak pengalaman dalam menggunakan kerangka kerja front-end, kami dapat menggunakan metode pagination yang lebih kaya.
Bahkan, bukan tidak mungkin bagi kita untuk membangun komponen paging sendiri. Di sisi seluler, saya mengimplementasikannya dengan kode saya sendiri. Namun, yang ingin saya rekomendasikan di sini adalah menggunakan plugin halaman tata letak, dan situs web resminya adalah (http://laypage.layui.com/).
Pengembangan Peraturan Paging
Pertama, mari kita lihat deskripsi antarmuka
Inilah antarmuka GET. Oleh karena itu, seperti yang ditunjukkan pada gambar di atas, cara yang benar untuk meminta adalah dengan secara langsung menambahkan parameter setelah URL antarmuka.
http://cnodejs.org/api/v1/topics?page=11
Oke, maka alamat URL kami bisa //xxx/index.shtml?1 karena saya tidak berencana untuk menggunakan parameter lain, cukup lengkapi pagination. Oleh karena itu, Anda dapat secara langsung menambahkan ID pagination setelahnya, dan kemudian mendapatkan ID dalam URL melalui fungsi dan menambahkannya ke antarmuka, sehingga kebutuhan kita dapat diwujudkan.
Tulis kode untuk diimplementasikan!
Dapatkan ID di URL
Seperti yang saya pikirkan di atas, kami membutuhkan fungsi yang dapat dengan benar mendapatkan ID yang kami tambahkan ke alamat URL untuk menyambut Anda dengan baik.
function getUrlid () {var host = window.location.href; var id = host.substring (host.indexof ("?")+1, host.length); mengembalikan id;}Seperti yang ditunjukkan pada kode di atas, melalui metode fungsi ini, kita bisa mendapatkan ID yang kita tambahkan setelah URL, dan mengujinya
$ (function () {var id = getUrlid (); console.log (id); var url = "http://cnodejs.org/api/v1/topics"; getjson (url, pushdom);});Seperti yang ditunjukkan pada gambar di bawah ini:
Kami memperoleh data yang berbeda melalui ID
$ (function () {var id = getUrlid (); var url = "http://cnodejs.org/api/v1/topics?page="+id; getjson (url, pushdom);});Seperti disebutkan di atas, Anda dapat memperoleh data yang berbeda sesuai dengan URL yang berbeda.
Gunakan tata letak untuk mengimplementasikan pagination
Pertama -tama, tentu saja, adalah merujuk file.
<skrip src = "res/js/plugin/laypage/laypage.js"> </script>
Di bagian HTML yang sesuai, tambahkan kotak ke komponen paging, sebagai berikut:
<div> </div>
Kemudian, kami menyalin kode di situs web resmi. Memodifikasinya dengan tepat, dan kode adalah sebagai berikut
$ (function () {var id = getUrlid (); var url = "http://cnodejs.org/api/v1/topics?page="+id; getjson (url, pushdom); tata letak ({cont: $ (". Halaman "), halaman: 100, arus, lompatan: e, {cont: $ (". '?'+e.curr;}}});})Efek akhir ditunjukkan pada gambar di bawah ini:
ringkasan
Dalam bab ini, konten kami sebenarnya tidak ada hubungannya dengan Vue. Namun, tidak peduli konten apa yang digunakan, pada akhirnya ditujukan untuk menyelesaikan proyek. Menggunakan plug-in yang sudah dikembangkan dapat sangat meningkatkan efisiensi kami.
lampiran
Situs web resmi vue
Detail API CNodeJS
Unduh kode sumber seri tutorial ini
Bab 1 Tutorial Praktis Vuej, Membangun Dasar -dasar dan Menerjemahkan Daftar
Tutorial Praktis Vuejs Bab 2, perbaiki kesalahan dan mempercantik waktu
Tutorial Praktis Vuejs Bab 3, menggunakan plug-in tata letak untuk mewujudkan pagination
Artikel ini awalnya ditulis oleh Fungleo
Alamat rilis pertama: http://blog.csdn.net/fungleo/article/details/51649074
Artikel ini telah dikompilasi ke dalam tutorial pembelajaran komponen front-end vue.js ", dan semua orang dipersilakan untuk belajar dan membaca.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.