vue implements list scrolling up and down

As a front-end developer, we often need to scroll up and down lists, but if we use native scroll bars, the user experience is often not ideal. Therefore, this article will introduce how to use Vue.js to achieve the up and down scrolling effect of the list to improve the user experience.

Implementation Idea

The core idea to implement up and down circular scrolling is to add a certain amount of repeated data between the beginning and end of the list, so that when the user scrolls to the top or bottom of the list, we will Let the scroll actually start with the duplicate data at the other end. In this way, the effect of up and down circular scrolling can be achieved.

However, if duplicate data is added directly to the original data source, the original data will not be displayed normally. Therefore, we need to achieve this with the help of computed properties to maintain the integrity of the original data.

Implementation process

The process of implementing up and down circular scrolling in Vue.js can be divided into the following steps:

1. Add an external container to the list

In order to achieve the scrolling effect, we first need to add a container element and place the list inside it. At the same time, we also need to set the height and overflow properties of the container so that the user can scroll the list.

<div class="list-container"
     style="height: 400px;
            overflow: auto;">
  <ul class="list">
    <li v-for="(item, index) in displayList"
        :key="item.id">
      {{ item.text }}
    </li>
  </ul>
</div>

2. Define the data source and calculated properties

Next, we need to define the data source and calculated properties. Here we use an arraylist as Data source, with displayList as the calculated attribute. In the calculated attribute, we will clone the data source through the cloneList method, connect the cloned data sources end to end, and add duplicate data.

data() {
  return {
    list: [
      { id: 1, text: 'item 1' },
      { id: 2, text: 'item 2' },
      ...
      { id: 20, text: 'item 20' }
    ]
  }
},
computed: {
  displayList() {
    const cloneList = [...this.list, ...this.list, ...this.list];
    const top = this.scrollTop % this.itemHeight;
    const startIndex = Math.floor(this.scrollTop / this.itemHeight) % this.list.length;
    const endIndex = startIndex + Math.ceil(this.listHeight / this.itemHeight);

    return cloneList.slice(startIndex, endIndex + 1);
  }
},

3. Bind scroll events

In order to update the display content of the list according to the user's scrolling action, we need to listen to the scroll event of the list container , update the calculated properties of displayList by calculating the scrolled distance.

mounted() {
  const listContainer = document.querySelector('.list-container');
  listContainer.addEventListener('scroll', this.handleScroll);
},
methods: {
  handleScroll() {
    const listContainer = document.querySelector('.list-container');
    this.scrollTop = listContainer.scrollTop;
  }
},

4. Calculate scrolling-related properties

In the calculated properties, we need to calculate the position of the scroll bar and the height of the list items and other properties, and display them in displayList is recalculated when updated. In this example, we use this.scrollTop to save the current scrolled distance of the container, use this.itemHeight to save the height of each list item, and use this. listHeight to save the height of the entire list.

data() {
  return {
    ...
    scrollTop: 0,
    itemHeight: 30,
    listHeight: this.list.length * this.itemHeight
  }
},
computed: {
  ...
  displayList() {
    ...
    this.listHeight = this.list.length * this.itemHeight;
    return cloneList.slice(startIndex, endIndex + 1);
  }
},

Summary

Through the above steps, we can achieve up and down scrolling of the list based on Vue.js. When the user scrolls to the top or bottom of the list, we make the scroll actually start from the repeated data at the other end, thus achieving the effect of scrolling up and down. In addition, we used calculated properties to maintain the integrity of the original data, and achieved a natural and smooth scrolling effect by binding scroll events and calculating scroll-related properties.

The above is the detailed content of vue implements list scrolling up and down. For more information, please follow other related articles on the PHP Chinese website!