Vue sample code for easily implementing virtual scrolling

Preface

In the daily development of mobile web pages, there are occasionally some scenarios where long lists need to be rendered. For example, a travel website needs to fully display the list of cities across the country, and then display all the names in the address book in alphabetical order of A, B, C...

Generally, there will be no unexpected effects when the number of long lists is within a few hundred, and the browser itself is sufficient to support it. However, once the number reaches thousands, the page rendering process will be obviously stuck. When the number exceeds tens of thousands or even hundreds of thousands, the web page may crash directly.

In order to solve the rendering pressure caused by long lists, the industry has developed a corresponding response technology, namely virtual scrolling of long lists.

The essence of virtual scrolling is that no matter how the page slides, the HTML document only renders a small number of DOM elements displayed in the current screen viewport.

Assuming that there are 100,000 data in a long list, for the user, he will only see the dozen or so data displayed on the screen. Therefore, when the page slides, by listening to the scroll event and quickly switching the viewport data, the scrolling effect can be highly simulated.

Virtual scrolling only needs to render a small number of DOM elements to simulate a similar scrolling effect, which makes it possible for front-end engineers to develop long lists of tens of thousands or even hundreds of thousands of items.

The following picture shows a long list of cities around the world that can be seen on a mobile phone (source code is posted at the end of the article).

Rolling principle

To understand how virtual scrolling works, first look at the following picture. When you slide your finger down, the HTML page will also scroll up.
Through the distances marked in the image, we can draw the following conclusion. When the top edge of the screen viewport coincides with the top edge of the div element with the id item, the distance between the item element and the top of the long list is exactly equal to the scrollTop distance of the page (this conclusion will be used when calculating the distance later).

In order to simulate a realistic scrolling effect, virtual scrolling should first meet the following two requirements.

• The scroll bar of the virtual scroll list is consistent with that of the ordinary list. For example, if the list contains 1,000 data items, and the browser uses the ordinary rendering method, assuming that the scroll bar needs to be scrolled down 5,000px to be attached to the bottom. Then, after applying the virtual scrolling technology, the scroll bar should also have the same characteristics, and it needs to be scrolled down 5,000px to be attached to the bottom.
• Virtual scrolling only renders the viewport and some DOM elements on the upper and lower sides. As the scroll bar slides down, the content of the view must be updated in real time to ensure that the content seen is consistent with that seen when rendering a long list normally.

In order to meet the above requirements, the HTML design structure is as follows.

.wrapper is the outermost container element, position is set to absolute or relative, and child elements are positioned based on it.

The sub-elements .background and .list are the key to virtual scrolling. .background is an empty div, but it needs to be set to a height that is equal to the sum of the heights of all the list items in the long list. In addition, it must be set to absolute positioning and the z-index value to -1.

.list is responsible for dynamically rendering the Dom elements observed by the viewport, and the position is set to absolute.

<template>
  <div class="wrapper">
    <div class="background" :style="{height:`${total_height}px`}"></div>
    <div class="list">
      <div class="line">
        <div class="item lt">BEIJING</div>
        <div class="item gt">Beijing</div>
      </div>
      <div class="line">
        <div class="item lt">shanghai</div>
        <div class="item gt">Shanghai</div>
      </div>
      <div class="line">
        <div class="item lt">guangzhou</div>
        <div class="item gt">Guangzhou</div>
      </div>
      ... //Omitted</div>
  </div>
</template>
<style lang="scss" scoped>
.wrapper {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 60px;
  overflow-y: scroll;
  .background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
  }
  .list {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
}
</style>

If the total_height in the above code is equal to 10000px, the page running effect diagram is as follows.
Since the height of the child element .background is set, the parent element .wrapper will be supported by the child element, and a scroll bar will appear.
If you slide down at this time, the two child elements .background and .list will scroll up at the same time. When the scroll distance reaches 9324px, the scroll bar also reaches the bottom.
This is because the parent element .wrapper itself is 676px high, plus the sliding distance of 9324px, the result is exactly equal to the total height of the list 10000px.
By observing the above behavior, we can see that although .background is just an empty div, by giving it the total height of the list, the scroll bar on the right can be kept consistent in appearance and behavior with the scroll bar generated by ordinary long list rendering.

The scroll bar problem is solved, but as the scroll bar slides down, the data list moves up. After the list is completely moved out of the screen, the next slide is all white screen.
In order to solve the white screen problem, the viewport must always show the sliding data. Then the .list element should dynamically update its own absolutely positioned top value according to the sliding distance, so as to ensure that the .list is not drawn outside the screen. At the same time, the data that should be displayed in the current viewport should be dynamically rendered according to the sliding distance.

Observe the following animation, the Dom structure on the right shows the changes when sliding.

After the scroll bar slides down quickly, the DOM element of the list is quickly rendered and refreshed. At this time, in addition to the constant replacement of the DOM element inside the .list, the .list element itself is also constantly modifying the transform: translate3d(0, ? px ,0) style value (modifying translate3d can achieve a similar effect to modifying the top attribute value).

After the above explanation, the implementation logic of virtual scrolling is clear. First, js monitors the sliding event of the scroll bar, and then calculates which sub-elements of the .list element to render by the sliding distance, and then updates the position of the .list element. When the scroll bar keeps sliding, the sub-elements and positions are also constantly updated, and the scrolling effect is simulated on the viewport.

accomplish

The developed Demo page is shown in the figure below. The list items contain the following three structures:

• Small list items, the first letter of the city is on a separate line, with a height of 50px;
• Ordinary list items, English name on the left, Chinese name on the right, height 100px;
• Large list item, with English name on the left, Chinese name in the middle, and a picture on the right, with a height of 150px;

The json structure of the list data city_data is similar to the following. type 1 represents the style structure rendering of small list items, 2 represents ordinary list items, and 3 represents large list items.

[{"name":"A","value":"","type":1},{"name":"Al l'Ayn","value":"Ayn","type":2},{"name":"Aana","value":"Aana","type":3} ... ]

city_data contains all the data in the long list. After obtaining city_data, we first traverse and adjust the data structure of each item (the code is as follows).

By processing in the following way, each list item finally contains a top and height value. The top value indicates the length of the item from the top of the long list, and the height value refers to the height of the item.
total_height is the total height of the entire list, which will eventually be assigned to the .background element mentioned above. The processed data is assigned to this.list for storage, and the height of the minimum list item this.min_height is recorded.

  mounted () {
     function getHeight (type) { // Return the height according to the type value switch (type) {
          case 1: return 50;
          case 2: return 100;
          case 3: return 150;
          default:
            return "";
        }
      }
      let total_height = 0;
      const list = city_data.map((data, index) => {
        const height = getHeight(data.type);
        const ob = {
          index,
          height,
          top: total_height,
          data
        }
        total_height += height;
        return ob;
      })
      this.total_height = total_height; // Total height of the list this.list = list;
      this.min_height = 50; // The minimum height is 50
      //The maximum number of list items that the screen can accommodate, containerHeight is the height of the parent container, calculated according to the minimum height this.maxNum = Math.ceil(containerHeight / this.min_height);
  }

HTML renders different style structures according to the type value (code as follows). The parent container .wrapper binds a sliding event onScroll, and the list element .list does not traverse the this.list array, because this.list is the original data, which contains all the list items.

The <template> template only needs to traverse the data runList that needs to be displayed in the viewport. The data contained in the array runList will be continuously updated with the scrolling event.

<template>
  <div class="wrapper" ref="wrapper" @scroll="onScroll">
    <div class="background" :style="{height:`${total_height}px`}"></div>
    <div class="list" ref="container">
      <div v-for="item in runList" :class="['line',getClass(item.data.type)]" :key="item">
        <div class="item lt">{{item.data.name}}</div>
        <div class="item gt">{{item.data.value}}</div>
        <div v-if="item.data.type == 3" class="img-container">
          <img src="../../assets/default.png" />
        </div>
      </div>
    </div>
  </div>
</template>

The scroll event triggers the onScroll method (code as follows). Since the scroll bar is triggered very frequently, in order to reduce the amount of calculation by the browser, the requestAnimationFrame function is used to throttle.

The scroll event object e can get the distance of the current scroll bar sliding. Based on distance, we only need to calculate the list data of runList and modify the position information of .list.

 onScroll (e) {
      if (this.ticking) {
        return;
      }
      this.ticking = true;
      requestAnimationFrame(() => {
        this.ticking = false;
      })
      const distance = e.target.scrollTop;
      this.distance = distance;
      this.getRunData(distance);
 }

How can we quickly find the first list item element that should be rendered under the screen viewport based on the scroll distance?

this.list is the data source of the long list, where each list item stores its distance top from the top of the long list and its own height height.
A conclusion mentioned above is that during page scrolling, if the top edge of the viewport coincides with the top edge of a list item, the sliding distance scrollTop is exactly equal to the distance top from the list item to the top of the long list.

If the page moves up a little bit, only part of the first list item under the viewport is displayed, and the other part is out of the screen. At this time, we still determine that the starting element under the viewport is still the list item, unless it continues to move up until it is completely out of the screen.

Then the standard for judging the first element rendered in the viewport is that the scrollTop of the page is between the top and top + height of the list item element.

Based on the above principle, binary search can be used to achieve fast query (code as follows).

// Use binary search to calculate the starting index, scrollTop is the scroll distance getStartIndex (scrollTop) {
      let start = 0, end = this.list.length - 1;
      while (start < end) {
        const mid = Math.floor((start + end) / 2);
        const { top, height } = this.list[mid];
        if (scrollTop >= top && scrollTop < top + height) {
          start = mid;
          break;
        } else if (scrollTop >= top + height) {
          start = mid + 1;
        } else if (scrollTop < top) {
          end = mid - 1;
        }
      }
      return start;
}

The binary method calculates the index of the first element rendered under the viewport in the this.list array, named the starting index start_index. Next, enter the core function getRunData (code as follows). It mainly does the following two things.

• Dynamically update runList list data
• Dynamically update the position of the .list long list elements

In actual development, assuming the screen height is 1000px and the smallest list item is 50px, the maximum number of list items this.maxNum that the screen can accommodate is 20.
Calculate the starting index start_index based on the sliding distance, and then intercept 20 elements from the data source this.list based on start_index and assign them to this.runList. Wouldn't that complete the data update?

If this.runList only holds the maximum number of items that can fit on one screen, when the scroll bar scrolls quickly, the rendering speed of the interface will not keep up with the finger sliding speed, and a white screen will flash at the bottom.

The solution to this problem is to render a little more buffered data on the HTML document. For example, the getRunData function below will render the number of list items that can accommodate three screen heights, corresponding to the upper screen, middle screen, and lower screen respectively.

The middle screen is the screen corresponding to the current viewport, and the upper and lower screens store the buffered Doms that are not displayed on the upper and lower sides of the viewport. First, the binary search method can be used to query the index start_index of the first list item element under the screen viewport, and then the index of the first list item of the upper and lower screens can also be easily obtained based on start_index.

 getRunData(distance = null) {

      //Scrolling distance const scrollTop = distance ? distance : this.$refs.container.scrollTop;

      //In which range is scrolling not performed if (this.scroll_scale) {
        if (scrollTop > this.scroll_scale[0] && scrollTop < this.scroll_scale[1]) {
          return;
        }
      }

      //Starting index let start_index = this.getStartIndex(scrollTop);
      start_index = start_index < 0 ? 0 : start_index;

      //Upper screen index, this.cache_screens defaults to 1, cache one screen let upper_start_index = start_index - this.maxNum * this.cache_screens;
      upper_start_index = upper_start_index < 0 ? 0 : upper_start_index;

      // Adjust offset
      this.$refs.container.style.transform = `translate3d(0,${this.list[upper_start_index].top}px,0)`;

      //Elements of the middle screen const mid_list = this.list.slice(start_index, start_index + this.maxNum);

      // Upper screen const upper_list = this.list.slice(upper_start_index, start_index);

      // Down screen element let down_start_index = start_index + this.maxNum;

      down_start_index = down_start_index > this.list.length - 1 ? this.list.length : down_start_index;

      this.scroll_scale = [this.list[Math.floor(upper_start_index + this.maxNum / 2)].top, this.list[Math.ceil(start_index + this.maxNum / 2)].top];

      const down_list = this.list.slice(down_start_index, down_start_index + this.maxNum * this.cache_screens);

      this.runList = [...upper_list, ...mid_list, ...down_list];

   }

The scroll event is triggered very frequently. As a developer, we need to reduce the amount of browser calculations as much as possible. Therefore, a scroll range can be cached in the component, that is, the array this.scroll_scale (the data structure is similar to [5000,5675]). When the sliding distance is within this range, the browser does not need to update the list data.

Once the scroll distance scrollTop is within the scroll range, the getRunData function does not do anything. When the finger slides, the default scrolling behavior is used to move the .list element up and down with the finger.

Assuming the scroll direction is downward, when scrollTop runs out of the scroll range, at the moment when the upper edge of the sliding viewport.wrapper coincides with the upper edge of the next list item, the getRunData function first calculates the starting index start_index, and then obtains the index of the first element on the upper screen upper_start_index through start_index.

Since each list item cached its distance from the top of the long list when the component was mounted before, the position information that the .list element should be assigned can be obtained through this.list[upper_start_index].top. Then the new list data runList is recalculated to render the page, and the scroll range in the new state is cached.

So far, virtual scrolling has been realized through the above steps. Although the practical method introduced above is very simple to use, it requires designers to define the height of different style list items first when planning the design draft.

If the height of the list items needs to expand naturally according to the content inside, and cannot be fixed when designing the page, you can read the following reference article to achieve it.
Although virtual scrolling with adaptive list item height sounds tempting, it requires additional processing steps and faces new problems (for example, when the list item contains asynchronously loaded images, height calculation becomes difficult), and it will also greatly increase the amount of calculation for the browser. Therefore, whether the list item in the design needs to define the height depends on the specific scenario.

source code

source code

refer to

High-performance rendering of 100,000 data items A virtual scrolling implementation method that even novices can understand A brief introduction to the implementation principle of virtual lists

This concludes this article about the sample code for easily implementing virtual scrolling in Vue. For more relevant Vue virtual scrolling content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!