Infinite Scroll MDB Pro component

Vue Bootstrap Infinite Scroll - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

This directive adds a scroll event listener (to the window or the component it's attached to if it has overflow-y property set to scroll) and calls a callback method every time a user reaches an end of a page/container.

Live Preview

Basic usage

Step 1: Import the directive from 'mdbvue'


        <script>
          import { mdbInfiniteScroll } from "mdbvue";
        </script>
      

Step 2: Add mdbInfiniteScroll to the directives object


        <script>
          import { mdbInfiniteScroll } from "mdbvue";
          export default {
            directives: {
              mdbInfiniteScroll
            }
          };
        </script>
      

Step 3: Attach the directive to the container and create a method which will be called every time user reaches the end.


        <template>
          <mdb-list-group
            v-mdb-infinite-scroll="showMoreItems"
            flush
            style="max-height: 255px; overflow-y: scroll;"
          >
            <mdb-list-group-item
              v-for="(activity, i) in visibleActivities"
              :key="i"
              social
              circle
              iconColor="grey"
              :icon="activity.icon"
              >{{ activity.text }}</mdb-list-group-item
            >
          </mdb-list-group>
        </template>
      

        <script>
          import {
            mdbListGroup,
            mdbListGroupItem,
            mdbinfiniteScroll
          } from "mdbvue";

          export default {
            components: {
              mdbListGroup,
              mdbListGroupItem
            },
            data() {
              return {
                activities: [
                  {
                    icon: "swimmer",
                    text: "Swimming"
                  },
                  {
                    icon: "running",
                    text: "Running"
                  },
                  {
                    icon: "skating",
                    text: "Skating"
                  },
                  {
                    icon: "skiing",
                    text: "Skiing"
                  },
                  {
                    icon: "snowboarding",
                    text: "Snowboarding"
                  },
                  {
                    icon: "quidditch",
                    text: "Quidditch"
                  },
                  {
                    icon: "dumbbell",
                    text: "Weight lifting"
                  },
                  {
                    icon: "basketball-ball",
                    text: "Basketball"
                  },
                  {
                    icon: "futbol",
                    text: "Football"
                  },
                  {
                    icon: "volleyball-ball",
                    text: "Volleyball"
                  },
                  {
                    icon: "hockey-puck",
                    text: "Hockey"
                  },
                  {
                    icon: "table-tennis",
                    text: "Table Tennis"
                  },
                  {
                    icon: "skiing-nordic",
                    text: "Nordic skiing"
                  },
                  {
                    icon: "golf-ball",
                    text: "Golf"
                  },
                  {
                    icon: "biking",
                    text: "Cycling"
                  },
                  {
                    icon: "chess",
                    text: "Chess"
                  }
                ],
                visibleItems: 4
              };
            },
            computed: {
              visibleActivities() {
                return this.activities.slice(0, this.visibleItems);
              }
            },
            methods: {
              showMoreItems() {
                if (this.visibleItems + 2 < this.activities.length)
                  this.visibleItems += 2;
                else this.visibleItems = this.activities.length - 1;
              }
            },

            directives: { mdbinfiniteScroll }
          };
        </script>
      

Example with spinner

Live Preview

        <template>
          <mdb-container>
            <ul class="list-unstyled" v-mdb-infinite-scroll="loadItems">
              <li v-for="(item, i) in visibleItems" :key="i" class="my-2">
                <mdb-card>
                  <mdb-card-body>
                    <mdb-row>
                      <mdb-col sm="6">
                        <img :src="item.img" class="img-fluid" />
                      </mdb-col>
                      <mdb-col sm="6">
                        <h4 class="text-primary">{{ item.title }}</h4>
                        <h6>{{ item.category }}</h6>
                        <p class="grey-text my-4">{{ item.description }}</p>
                        <h2>{{ item.price }}</h2>

                        <div class="d-flex justify-content-end">
                          <mdb-btn
                            tag="a"
                            floating
                            color="primary"
                            icon="shopping-cart"
                          />
                          <mdb-btn tag="a" floating color="pink" icon="heart" />
                        </div>
                      </mdb-col>
                    </mdb-row>
                  </mdb-card-body>
                </mdb-card>
              </li>
              <li v-if="loading" class="text-center mt-5"><mdb-spinner /></li>
            </ul>
          </mdb-container>
        </template>
      

        <script>
          import {
            mdbContainer,
            mdbRow,
            mdbCol,
            mdbSpinner,
            mdbBtn,
            mdbCard,
            mdbCardBody,
            mdbInfiniteScroll
          } from "mdbvue";

          export default {
            name: "InfiniteScroll",
            components: {
              mdbContainer,
              mdbRow,
              mdbCol,
              mdbSpinner,
              mdbBtn,
              mdbCard,
              mdbCardBody
            },
            data() {
              return {
                items: [
                  {
                    img:
                      "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(39).webp",
                    category: "Shoes",
                    title: "Leather boots",
                    description:
                      "Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.",
                    price: "69$"
                  },
                  {
                    img:
                      "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(22).webp",
                    category: "Jeans",
                    title: "Slim jeans",
                    description:
                      "Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.",
                    price: "99$"
                  },
                  {
                    img:
                      "https://mdbootstrap.com/img/Photos/Others/img%20(31).webp",
                    category: "Shorts",
                    title: "Denim shorts",
                    description:
                      "Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.",
                    price: "49$"
                  },
                  {
                    img:
                      "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(30).webp",
                    category: "Accesories",
                    title: "Summer hat",
                    description:
                      "Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.",
                    price: "39$"
                  },
                  {
                    img:
                      "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(37).webp",
                    category: "Shoes",
                    title: "Black Heels",
                    description:
                      "Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.",
                    price: "79$"
                  },
                  {
                    img:
                      "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(31).webp",
                    category: "Outwear",
                    title: "Black jacket",
                    description:
                      "Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.",
                    price: "149$"
                  },
                  {
                    img:
                      "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(38).webp",
                    category: "Accesories",
                    title: "Leather bag",
                    description:
                      "Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.",
                    price: "29$"
                  },
                  {
                    img:
                      "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/belt.webp",
                    category: "Accesories",
                    title: "Leather belt",
                    description:
                      "Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.",
                    price: "79$"
                  },
                  {
                    img:
                      "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(57).webp",
                    category: "Shoes",
                    title: "Snickers",
                    description:
                      "Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.",
                    price: "139$"
                  }
                ],
                show: 3,
                loading: false
              };
            },
            computed: {
              visibleItems() {
                return this.items.slice(0, this.show);
              }
            },
            methods: {
              loadItems() {
                if (!this.loading && this.show < this.items.length) {
                  this.loading = true;
                  setTimeout(() => {
                    this.show += 1;
                    this.loading = false;
                  }, 1000);
                }

                return;
              }
            },
            directives: { mdbInfiniteScroll }
          };
        </script>