1. InfiniteScroll無(wú)限滾動(dòng)

1.1. InfiniteScroll無(wú)限滾動(dòng)滾動(dòng)至底部時(shí), 加載更多數(shù)據(jù)。

1.2. Attributes

參數(shù)	說(shuō)明	類(lèi)型	默認(rèn)值
infinite-scroll-disabled	是否禁用	boolean	false
infinite-scroll-delay	節(jié)流時(shí)延, 單位為ms	number	200
infinite-scroll-distance	觸發(fā)加載的距離閾值, 單位為px	number	0
infinite-scroll-immediate	是否立即執(zhí)行加載方法, 以防初始狀態(tài)下內(nèi)容無(wú)法撐滿(mǎn)容器。	boolean	true

2. InfiniteScroll無(wú)限滾動(dòng)例子

2.1. 使用腳手架新建一個(gè)名為element-ui-infinitescroll折疊面板的前端項(xiàng)目, 同時(shí)安裝Element插件。

2.2. 編輯index.js?

import Vue from 'vue' import VueRouter from 'vue-router' import InfiniteScroll from '../components/InfiniteScroll.vue' import DisabledInfiniteScroll from '../components/DisabledInfiniteScroll.vue'Vue.use(VueRouter)const routes = [{ path: '/', redirect: '/InfiniteScroll' },{ path: '/InfiniteScroll', component: InfiniteScroll },{ path: '/DisabledInfiniteScroll', component: DisabledInfiniteScroll } ]const router = new VueRouter({routes })export default router

2.3. 在components下創(chuàng)建InfiniteScroll.vue

<template><div><h1>基礎(chǔ)用法</h1><h4>在要實(shí)現(xiàn)滾動(dòng)加載的列表上上添加v-infinite-scroll, 并賦值相應(yīng)的加載方法, 可實(shí)現(xiàn)滾動(dòng)到底部時(shí)自動(dòng)執(zhí)行加載方法。</h4><div class="content"><ul class="infinite-list" v-infinite-scroll="load" style="overflow: auto;"><li v-for="i in count" class="infinite-list-item" :key="i">{{ i }}</li></ul></div></div> </template><script> export default {data () {return {count: 0}},methods: {load () {this.count += 2}} } </script><style scoped>.content {width: 800px;height: 500px;overflow: auto;text-align: center;}.content .infinite-list {list-style: none;margin: 0;padding: 0;}.infinite-list .infinite-list-item {width: 100%;height: 50px;background-color: #67C23A;}.infinite-list-item + .infinite-list-item {margin-top: 20px;} </style>

2.4. 在components下創(chuàng)建DisabledInfiniteScroll.vue

<template><div><h1>禁用加載</h1><div class="content" style="overflow: auto;"><ul class="infinite-list" v-infinite-scroll="load" infinite-scroll-disabled="disabled"><li v-for="i in count" class="infinite-list-item" :key="i">{{ i }}</li></ul><p v-if="loading">加載中...</p><p v-if="noMore">沒(méi)有更多了</p></div></div> </template><style scoped>.content {width: 800px;height: 500px;overflow: auto;text-align: center;}.content .infinite-list {list-style: none;margin: 0;padding: 0;}.infinite-list .infinite-list-item {width: 100%;height: 50px;background-color: #FFE5E5;}.infinite-list-item + .infinite-list-item {margin-top: 20px;} </style><script> export default {data () {return {count: 10,loading: false}},computed: {noMore () {return this.count >= 20},disabled () {return this.loading || this.noMore}},methods: {load () {this.loading = truesetTimeout(() => {this.count += 2this.loading = false}, 2000)}} } </script>

2.5. 運(yùn)行項(xiàng)目, 訪(fǎng)問(wèn)http://localhost:8080/#/InfiniteScroll

2.6. 運(yùn)行項(xiàng)目, 訪(fǎng)問(wèn)http://localhost:8080/#/DisabledInfiniteScroll

總結(jié)

以上是生活随笔為你收集整理的051_InfiniteScroll无限滚动的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。