1. InfiniteScroll無限滾動

1.1. InfiniteScroll無限滾動滾動至底部時, 加載更多數據。

1.2. Attributes

參數	說明	類型	默認值
infinite-scroll-disabled	是否禁用	boolean	false
infinite-scroll-delay	節流時延, 單位為ms	number	200
infinite-scroll-distance	觸發加載的距離閾值, 單位為px	number	0
infinite-scroll-immediate	是否立即執行加載方法, 以防初始狀態下內容無法撐滿容器。	boolean	true

2. InfiniteScroll無限滾動例子

2.1. 使用腳手架新建一個名為element-ui-infinitescroll折疊面板的前端項目, 同時安裝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下創建InfiniteScroll.vue

<template><div><h1>基礎用法</h1><h4>在要實現滾動加載的列表上上添加v-infinite-scroll, 并賦值相應的加載方法, 可實現滾動到底部時自動執行加載方法。</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下創建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">沒有更多了</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. 運行項目, 訪問http://localhost:8080/#/InfiniteScroll

2.6. 運行項目, 訪問http://localhost:8080/#/DisabledInfiniteScroll

總結

以上是生活随笔為你收集整理的051_InfiniteScroll无限滚动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。