preface

Xiao Ling did a custom home page function some time ago. The requirement is to load the relevant components according to the background configuration data, and the user can customize the display of several components. The small number of components does not affect the loading efficiency at the beginning, but when more than 10 components are configured, the page load will be a bit sluggish. Suddenly remembered to do before the gallery view lazy loading function can be used, it will be used in the component loading.

The principle of

The principle is as follows: set the monitor of screen scrolling. If the screen is about to scroll to the bottom, load the content down.

Basic composition

The file structure is as follows

Let’s start by implementing a simple construct that dynamically constructs the user home page from back-end request data.

The core code is as follows:

Index. Vue HTML part

<div class="index-content" id="index-content" ref="content">
      <! -- Walk through components -->
      <component
        :is="item.name"
        v-for="item in componentList"
        :key="item.id"
        :content="item.content"
        :skHight="item.skHight"
      ></component>
 </div>
Copy the code

Index. Vue js part

// data
// Here is the component configuration data requested by the back end
componentList: [{id: 4.name: "banner".// The selected component
          content: { title: "Banner figure" }, // Parameters passed to the component
          skHight: "180px" // Skeleton screen height
        },
        {
          id: 3.name: "menus".content: { title: "Diamond Zone" },
          skHight: "180px"
        },
        / /... The remaining components
]
Copy the code

Common.js is used to configure component reference addresses

export default {
  pics: () = > import('@/views/indexLive/components/pics/Pics'),
  menus: () = > import('@/views/indexLive/components/menus/Menus'),
  goods: () = > import('@/views/indexLive/components/goods/Goods'),
  banner: () = > import('@/views/indexLive/components/banner/Banner'),}Copy the code

Index. vue introduction section

import common from "./common.js"; components: { ... common },Copy the code

We set up a method in each component to simulate background data, and the request time is 1 second. It is executed when the component is loaded.

Vue JS component

// methods
getData() {
      this.times = setTimeout(() = > {
        this.dataList = [
          {
            name: "Back-end requested data"}];console.log(`The ${this.content.title}Data load completed);
      }, 1000);
    }
 // mounted
mounted() {
    this.getData();
},
Copy the code

After executing the above code, we find that the component loads data that is not in this screen.

Implement load on demand

We’ll start with something called showComponentList to display the components. When the screen scrolls to the bottom, the code in all components of componentList will be pushed to the display componentList one by one, to achieve on-demand loading.

The specific code is as follows: index.vue js

// mounted
mounted() {
    this.initData();
    window.addEventListener("scroll".this.handleScroll, true);
},
// before
destroyed() {
    window.removeEventListener("scroll".this.handleScroll);
}

// methods
// Initialize the component and change the showComponentList
initData() {
      this.showComponentList = this.componentList.slice(0.this.initNum);
    },
// Scroll to listen and load the following components when the bottom is near 100px
handleScroll(e) {
    let dom = document.getElementById("scroll-box");
    let scrollTop = dom.scrollTop || document.body.scrollTop;
    let clientHeight = dom.clientHeight;
    let scrollHeight = dom.scrollHeight;
    let bottomOfWindow = scrollTop + clientHeight >= scrollHeight - 100;
        if (bottomOfWindow) {
            if (this.initNum <= this.componentList.length + 1) {
              this.initNum = this.initNum + 1;
              this.initData(); }}}Copy the code

index.vue html


<! ComponentList = "componentList" -->
  <component
    :is="item.name"
    v-for="item in showComponentList"
    :key="item.id"
    :content="item.content"
    :skHight="item.skHight"
  ></component>
Copy the code

The implementation effect is as follows:

Our component loading on demand is now complete.

The project address

Project address: github.com/FireSmallPa…