How to implement scrolling loading of images or lists in Vue?

As web applications become more and more complex, we often need to display a large number of pictures or lists on the page. If you load all the content at once, it will greatly affect the page loading speed and user experience. In this case, scrolling loading has become a very popular method.

Rolling loading, also called infinite scrolling, refers to the process of requesting subsequent data in real time through AJAX technology when the user scrolls the page. This technology is widely used in social media sites like Facebook, Twitter, Instagram, etc. to achieve an efficient experience.

In Vue.js, there are usually two ways to implement rolling loading. One is to write code yourself, and the other is to use a third-party plug-in. Next, we will introduce them one by one.

1. Write your own code to implement rolling loading

Vue.js provides a very convenient instruction v-scroll, which can be used to monitor the scrolling events of the page. We can determine whether the scrollTop distance of the div element reaches the bottom when scrolling. If it reaches the bottom, subsequent data requests will be triggered.

The following is a sample code that uses v-scroll to implement scrolling loading of images:

<template>
  <div class="image-list" v-scroll="onScroll">
    <div class="image" v-for="image in images" :key="image.id">
      <img :src="image.src" />
    </div>
    <div v-if="loading">加载中...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [],
      loading: false,
      page: 1,
      pageSize: 10
    }
  },

  mounted() {
    this.loadImages()
  },

  methods: {
    loadImages() {
      this.loading = true
      // 模拟请求数据，每次请求 10 条数据
      setTimeout(() => {
        let start = (this.page - 1) * this.pageSize
        let end = start + this.pageSize
        for (let i = start; i < end; i++) {
          this.images.push({
            id: i,
            src: `http://www.example.com/images/${i}.jpg`
          })
        }
        this.loading = false
        this.page++
      }, 1000)
    },

    onScroll(e) {
      // 获取 div 元素的 scrollTop 和 clientHeight
      let scrollTop = e.target.scrollTop
      let clientHeight = e.target.clientHeight
      let scrollHeight = e.target.scrollHeight
      // 比较 scrollTop + clientHeight 和 scrollHeight
      if (scrollTop + clientHeight >= scrollHeight) {
        this.loadImages()
      }
    }
  }
}
</script>

In this example, we use v-scroll to listen to the scrolling event of the div element, and in the onScroll method Determine whether it has bottomed out. If it bottoms out, the loadImages method will be triggered. This method will simulate an asynchronous request for data and push the data into the images array. In addition, in order to improve user experience, we added a loading variable to prompt that data is loading in real time.

2. Use third-party plug-ins to implement rolling loading

In addition to writing code ourselves to implement rolling loading, we can also use some third-party plug-ins to implement rolling loading. Here we introduce two commonly used plug-ins, namely vue-infinite-scroll and vue-virtual-scroll-list.

1. vue-infinite-scroll plug-in

vue-infinite-scroll is an infinite scroll plug-in based on Vue.js, which can help us implement scrolling loading lists , pictures and other scenes. Using this plug-in is very simple. You only need to add the v-infinite-scroll directive to the component that needs to implement rolling loading, and then specify the method that needs to trigger rolling loading.

The following is a sample code that uses the vue-infinite-scroll plug-in to implement a rolling loading list:

<template>
  <div class="list" v-infinite-scroll="loadMore">
    <div class="item" v-for="(item, index) in items" :key="index">
      {{ item.text }}
    </div>
  </div>
</template>

<script>
import InfiniteScroll from 'vue-infinite-scroll'

export default {
  mixins: [InfiniteScroll],

  data() {
    return {
      items: []
    }
  },

  methods: {
    loadMore() {
      // 模拟异步请求数据
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.items.push({ text: `Item ${this.items.length + 1}` })
        }
      }, 1000)
    }
  }
}
</script>

In this example, we first installed the vue-infinite-scroll plug-in through npm, and Introduce it into the component. We then use mixins to mix into the current component a Vue instance that automatically creates an infinite-scroll event that can be fired. Finally, we specify the loadMore method in the v-infinite-scroll directive, which simulates an asynchronous request for data and pushes the data into the items array.

2. vue-virtual-scroll-list plug-in

vue-virtual-scroll-list is a virtual scrolling plug-in based on Vue.js that can help us quickly Implement list scrolling of large amounts of data to improve page performance and user experience. Different from traditional scroll loading, vue-virtual-scroll-list uses virtual scrolling technology to only render data items in the currently visible area, thereby avoiding a large number of DOM rendering and rearrangement, and improving the efficiency and smoothness of the page. Spend.

The following is a sample code that uses the vue-virtual-scroll-list plug-in to implement a scrolling loading list:

<template>
  <virtual-list
    :size="50"
    :remain="10"
    :data-key="'id'"
    :data-sources="items"
    :data-component="$options.components.item"
    @load="loadMore"
  >
  </virtual-list>
</template>

<script>
import VirtualList from 'vue-virtual-scroll-list'
import Item from './Item.vue'

export default {
  components: { Item },

  data() {
    return {
      items: []
    }
  },

  methods: {
    loadMore(start, end) {
      // 模拟异步请求数据
      setTimeout(() => {
        let count = end - start
        for (let i = 0; i < count; i++) {
          this.items.push({ id: this.items.length + 1, text: `Item ${this.items.length + 1}` })
        }
      }, 1000)
    }
  }
}
</script>

In this example, we first installed vue-virtual-scroll- through npm list plugin and introduce it into the component. We then use the component in the template, which accepts parameters such as size, remain, data-key, data-sources, and data-component.

Among them, the size parameter specifies the height of each data item, the remain parameter specifies the number of pre-rendering, data-key specifies the field used to uniquely identify each data item, and data-sources specifies the required Rendered data list, data-component specifies the rendering component of the data item. Finally, we execute the logic of asynchronously requesting data in the load event.

Conclusion

Through the above introduction, we can find that there are many ways to implement scrolling loading of images or lists in Vue.js. Although writing code yourself is flexible, it requires a lot of code and requires a certain amount of time and energy. Although using third-party plug-ins is simple, it requires an in-depth understanding of the principles and usage of plug-ins in order to better develop business. Therefore, when implementing rolling loading, you need to choose a method that suits you based on the specific business scenario and your own strength.

The above is the detailed content of How to implement scrolling loading of images or lists in Vue?. For more information, please follow other related articles on the PHP Chinese website!