如何使用Vue内无限加载vue-infinite-loading
这次给大家带来如何使用Vue内无限加载vue-infinite-loading,使用Vue内无限加载vue-infinite-loading的注意事项有哪些,下面就是实战案例,一起来看一下。
注意:vue-infinite-loading2.0只能在Vue.js2.0中使用。如果你想在Vue.js1.0中使用,请安装vue-infinite-loading1.3版本
如何安装
npm install vue-infinite-loading --save
导入方式
es6模块导入方式
import InfiniteLoading from 'vue-infinite-loading'; export default { components: { InfiniteLoading }, };
CommonJS 模块导入方式
const InfiniteLoading = require('vue-infinite-loading'); export default { components: { InfiniteLoading } };
其他方式
<script src="vue-infinite-loading.js"></script>
在页面中应用
直接在组件中声明
components:{ InfiniteLoading }
模板部分
<infinite-loading @infinite="infiniteHandler"> <span slot="no-more"> 我们是有底线的 </span> </infinite-loading>
js部分
当滚动到底部时自动触发infiniteHandler事件
infiniteHandler($state) { setTimeout(() => { const temp = []; for (let i = this.list.length + 1; i <= this.list.length + 20; i++) { temp.push(i); } this.list = this.list.concat(temp); $state.loaded(); $state.complete(); }, 1000); }
注意
如果还是使用
this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
会出现警告,告诉你已经修改为传参传入$state使用这个方法。
属性
distance:这是滚动的临界值。如果到滚动父元素的底部距离小于这个值,那么infiniteHandler回调函数就会被调用。
<infinite-loading @infinite="infiniteHandler" distance="Number"> </infinite-loading>
spinner:通过这个属性,你可以选择一个你最喜爱旋转器作为加载动画。
spinner="bubbles";
1、bubbles
2、circles
3、default
4、spiral
5、waveDots
<infinite-loading @infinite="infiniteHandler" spinner="String"> </infinite-loading>
direction:如果你设置这个属性为top,那么这个组件将在你滚到顶部的时候,调用infiniteHandler函数。
警告:你必须在数据加载后,手动地将滚动父元素的scrollTop设置为正确的值,否则,该组件会一次又一次调用infiniteHandler函数。
direction="top"
<infinite-loading @infinite="infiniteHandler" direction="String"> </infinite-loading>
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
Atas ialah kandungan terperinci 如何使用Vue内无限加载vue-infinite-loading. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas


![Ralat memuatkan pemalam dalam Illustrator [Tetap]](https://img.php.cn/upload/article/000/465/014/170831522770626.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
Apabila memulakan Adobe Illustrator, adakah mesej tentang ralat memuatkan pemalam timbul? Sesetengah pengguna Illustrator telah mengalami ralat ini semasa membuka aplikasi. Mesej itu diikuti dengan senarai pemalam yang bermasalah. Mesej ralat ini menunjukkan bahawa terdapat masalah dengan pemalam yang dipasang, tetapi ia juga mungkin disebabkan oleh sebab lain seperti fail Visual C++ DLL yang rosak atau fail pilihan yang rosak. Jika anda menghadapi ralat ini, kami akan membimbing anda dalam artikel ini untuk menyelesaikan masalah, jadi teruskan membaca di bawah. Ralat memuatkan pemalam dalam Illustrator Jika anda menerima mesej ralat "Ralat memuatkan pemalam" semasa cuba melancarkan Adobe Illustrator, anda boleh menggunakan yang berikut: Sebagai pentadbir

Sarikata tidak berfungsi pada Stremio pada PC Windows anda? Sesetengah pengguna Stremio melaporkan bahawa sari kata tidak dipaparkan dalam video. Ramai pengguna melaporkan mengalami mesej ralat yang mengatakan "Ralat memuatkan sari kata." Berikut ialah mesej ralat penuh yang muncul dengan ralat ini: Ralat berlaku semasa memuatkan sari kata Gagal memuatkan sari kata: Ini mungkin masalah dengan pemalam yang anda gunakan atau rangkaian anda. Seperti yang dikatakan oleh mesej ralat, mungkin sambungan internet anda yang menyebabkan ralat. Jadi sila semak sambungan rangkaian anda dan pastikan internet anda berfungsi dengan baik. Selain itu, mungkin terdapat sebab lain di sebalik ralat ini, termasuk sarikata yang bercanggah, sari kata yang tidak disokong untuk kandungan video tertentu dan apl Stremio yang sudah lapuk. suka

Jika anda menghadapi isu beku semasa memasukkan hiperpautan ke dalam Outlook, ia mungkin disebabkan oleh sambungan rangkaian yang tidak stabil, versi Outlook lama, gangguan daripada perisian antivirus atau konflik tambahan. Faktor-faktor ini boleh menyebabkan Outlook gagal mengendalikan operasi hiperpautan dengan betul. Betulkan Outlook terhenti apabila memasukkan hiperpautan Gunakan pembetulan berikut untuk membetulkan Outlook terhenti apabila memasukkan hiperpautan: Semak alat tambah yang dipasang Kemas kini Outlook Lumpuhkan sementara perisian antivirus anda dan kemudian cuba buat profil pengguna baharu Betulkan apl Office Program Nyahpasang dan pasang semula Office Mari mulakan. 1] Semak add-in yang dipasang Mungkin add-in yang dipasang dalam Outlook menyebabkan masalah.

Dengan perkembangan Internet, semakin banyak halaman web perlu menyokong pemuatan tatal, dan pemuatan tatal yang tidak terhingga adalah salah satu daripadanya. Ia membolehkan halaman memuatkan kandungan baharu secara berterusan, membolehkan pengguna menyemak imbas web dengan lebih lancar. Dalam artikel ini, kami akan memperkenalkan cara melaksanakan pemuatan skrol tak terhingga menggunakan PHP. 1. Apakah pemuatan skrol tak terhingga? Pemuatan skrol tak terhingga ialah kaedah memuatkan kandungan web berdasarkan bar skrol. Prinsipnya ialah apabila pengguna menatal ke bahagian bawah halaman, data latar belakang diambil secara tak segerak melalui AJAX untuk memuatkan kandungan baharu secara berterusan. Kaedah pemuatan seperti ini

Penyelesaian kepada masalah yang CSS tidak boleh dimuatkan termasuk menyemak laluan fail, menyemak kandungan fail, mengosongkan cache penyemak imbas, menyemak tetapan pelayan, menggunakan alat pembangun dan menyemak sambungan rangkaian. Pengenalan terperinci: 1. Semak laluan fail Mula-mula, sila pastikan laluan fail CSS adalah betul. Jika fail CSS terletak di bahagian atau subdirektori laman web yang berbeza, anda perlu menyediakan laluan yang betul Fail CSS terletak dalam direktori akar, laluan harus terus ;

Semasa memasang sistem win7, sesetengah netizen menghadapi situasi di mana memuatkan pemacu USB gagal. Peranti USB tidak dapat dikenali dalam sistem win7 baharu, dan pemacu kilat USB biasa, tetikus dan peranti lain tidak dapat digunakan. Jadi apa yang perlu saya lakukan jika pemasangan win7 gagal memuatkan pemacu USB? Biarkan Xiaobai mengajar anda cara menyelesaikan masalah kegagalan memuatkan pemacu USB semasa memasang win7. Kaedah 1: 1. Mula-mula, kita hidupkan komputer dan masukkan sistem komputer, dan semak versi sistem komputer dalam sistem komputer. Sahkan sama ada versi sistem komputer konsisten dengan versi pemacu peranti. 2. Selepas mengesahkan versi pemacu, sambungkan peranti USB ke sistem komputer. Sistem komputer menunjukkan bahawa peranti tidak boleh menyambung ke sistem. 3. Pada halaman maklumat sambungan, klik butang Bantuan untuk melihat maklumat bantuan. 4. Jika jabatan komputer

Bagaimanakah JavaScript mencapai kesan tatal tak terhingga untuk memuatkan secara automatik apabila menatal ke bahagian bawah halaman? Kesan tatal tak terhingga ialah salah satu ciri biasa dalam pembangunan web moden Ia boleh memuatkan lebih banyak kandungan secara automatik apabila menatal ke bahagian bawah halaman, membolehkan pengguna mendapatkan lebih banyak data atau sumber tanpa mengklik butang atau pautan secara manual. Dalam artikel ini, kami akan meneroka cara menggunakan JavaScript untuk mencapai fungsi ini dan menyediakan contoh kod khusus. Untuk mencapai kesan tatal tak terhingga memuatkan secara automatik apabila menatal ke bahagian bawah halaman, ia terbahagi terutamanya kepada yang berikut

Memandangkan jumlah data terus meningkat, pemuatan menatal halaman web secara beransur-ansur telah menjadi bahagian penting dalam pengalaman pengguna. Dalam artikel ini, kami akan membincangkan panduan lengkap tentang cara melaksanakan pemuatan tatal tak terhingga menggunakan Vue.js. Apakah pemuatan skrol tak terhingga? Pemuatan tatal tak terhingga, juga dikenali sebagai tatal tak terhingga, ialah teknik reka bentuk web yang digunakan untuk menambah lebih banyak kandungan semasa pengguna menatal ke bahagian bawah halaman. Teknologi ini biasanya digunakan pada blog, media sosial, kedai dalam talian dan laman web lain yang perlu memaparkan kandungan secara dinamik. Penatalan tak terhingga tidak sama dengan penomboran. Dalam paging tradisional, pengguna mesti
