search
HomeWeb Front-endJS TutorialHow to make the requirement of unlimited loading of data at the bottom of the sliding page

This time I will bring you how to make the requirement of unlimited loading of data at the bottom of the scrolling page, and what are the precautions for how to infinitely load data at the bottom of the scrolling page. The following is a practical case, let's take a look.

I saw an article Implementing an Infinite Scroll with Vue.js and thought it was quite practical, so I read it and briefly translated it for reference for those who need it.

From this project you can Deepen the understanding of the life cycle of Vue, when to start axios request, how to use native js with Vue to write scroll events, etc. Here I mainly extract and supplement the key points of the original article

Technology of this article Key points

  1. Vue life cycle

  2. axios simple usage

  3. moment.js format Change date

  4. Lazy loading of pictures

  5. Combined with native js to write scroll event

  6. Request section Flow

Create project

First create a simple vue project

# vue init webpack-simple infinite-scroll-vuejs

Then install some plug-ins needed for the project

# npm install axios moment

Initialize user data

After the project is built, run it and take a look

# npm run dev

After opening http://localhost:8080 and it is correct, we Let’s start modifying the code. Let’s first look at obtaining user data.

<script>
import axios from &#39;axios&#39;
import moment from &#39;moment&#39;
export default {
 name: &#39;app&#39;,
 // 创建一个存放用户数据的数组
 data() {
  return {
   persons: []
  }
 },
 methods: {
  // axios请求接口获取数据
  getInitialUsers() {
   for (var i = 0; i < 5; i++) {
    axios.get(`https://randomuser.me/api/`).then(response => {
     this.persons.push(response.data.results[0])
    })
   }
  },
  formatDate(date) {
   if (date) {
    return moment(String(date)).format(&#39;MM/DD/YYYY&#39;)
   }
  },
 beforeMount() {
  // 在页面挂载前就发起请求
  this.getInitialUsers()
 }
}
</script>

The original author also specifically reminds us that it is completely unnecessary and not recommended to request 5 times when loading the page. However, this interface can only return 1 at a time. This is only done for testing. Of course, I can also simulate the data through Mock, so I won’t go into details~

Next, let’s write the template structure and style, as follows:

<template>
 <p>
  </p>
<h1 id="Random-User">Random User</h1>
  <p>
   </p>
<p>
    <img  src="/static/imghwm/default1.png" data-src="person.picture.large" class="lazy" alt="How to make the requirement of unlimited loading of data at the bottom of the sliding page" >
   </p>
   <p>
    </p>
<p>{{ person.name.first}} {{ person.name.last }}</p>
    <ul>
     <li>
      <strong>Birthday:</strong> {{ formatDate(person.dob)}}
     </li>
     <p>
      <strong>Location:</strong> {{ person.location.city}}, {{ person.location.state }}
     </p>
    </ul>
   
  
 
</template>

<style>
.person {
 background: #ccc;
 border-radius: 2px;
 width: 20%;
 margin: 0 auto 15px auto;
 padding: 15px;

 img {
  width: 100%;
  height: auto;
  border-radius: 2px;
 }

 p:first-child {
  text-transform: capitalize;
  font-size: 2rem;
  font-weight: 900;
 }

 .text-capitalize {
  text-transform: capitalize;
 }
}
</style>

In this way, the page can display the personal information of 5 people.

Processing infinite scroll loading logic

We need to add scroll() in methods next. Monitor scrolling, and this event should be within the life cycle of mounted(). The code is as follows:

<script>
 // ...
 methods: {
  // ...
  scroll(person) {
   let isLoading = false
   window.onscroll = () => {
    // 距离底部200px时加载一次
    let bottomOfWindow = document.documentElement.offsetHeight - document.documentElement.scrollTop - window.innerHeight <= 200
    if (bottomOfWindow && isLoading == false) {
     isLoading = true
     axios.get(`https://randomuser.me/api/`).then(response => {
      person.push(response.data.results[0])
      isLoading = false
     })
    }
   }
  }
 },
 mounted() {
  this.scroll(this.persons)
 }
}
</script>

The original text of this code has some spelling errors. I have corrected it here, and also increased the distance from the bottom. Start loading data and intercept the flow.

Save it, go back to the browser, and check the effect. There is no problem~

Summary

Scroll The function of infinite loading to the bottom of the page is implemented on Vue and is similar to ordinary page development. Each time the scrolling load is not completed, the next request will not be triggered. Each request is pushed into the array, through How to make the requirement of unlimited loading of data at the bottom of the sliding page's data binding implements lazy loading (actually 0 0 I don't really agree with it...). After reading it, it feels quite simple.

I believe you have mastered the method after reading the case in this article , for more exciting content, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of vue calculated properties and listener practical projects

How to make a pull-up on the mobile terminal Slide down to refresh loading

The above is the detailed content of How to make the requirement of unlimited loading of data at the bottom of the sliding page. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Vue常见面试题汇总(附答案解析)Vue常见面试题汇总(附答案解析)Apr 08, 2021 pm 07:54 PM

本篇文章给大家分享一些Vue面试题(附答案解析)。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

5 款适合国内使用的 Vue 移动端 UI 组件库5 款适合国内使用的 Vue 移动端 UI 组件库May 05, 2022 pm 09:11 PM

本篇文章给大家分享5 款适合国内使用的 Vue 移动端 UI 组件库,希望对大家有所帮助!

vue中props可以传递函数吗vue中props可以传递函数吗Jun 16, 2022 am 10:39 AM

vue中props可以传递函数;vue中可以将字符串、数组、数字和对象作为props传递,props主要用于组件的传值,目的为了接收外面传过来的数据,语法为“export default {methods: {myFunction() {// ...}}};”。

手把手带你利用vue3.x绘制流程图手把手带你利用vue3.x绘制流程图Jun 08, 2022 am 11:57 AM

利用vue3.x怎么绘制流程图?下面本篇文章给大家分享基于 vue3.x 的流程图绘制方法,希望对大家有所帮助!

聊聊vue指令中的修饰符,常用事件修饰符总结聊聊vue指令中的修饰符,常用事件修饰符总结May 09, 2022 am 11:07 AM

本篇文章带大家聊聊vue指令中的修饰符,对比一下vue中的指令修饰符和dom事件中的event对象,介绍一下常用的事件修饰符,希望对大家有所帮助!

如何覆盖组件库样式?React和Vue项目的解决方法浅析如何覆盖组件库样式?React和Vue项目的解决方法浅析May 16, 2022 am 11:15 AM

如何覆盖组件库样式?下面本篇文章给大家介绍一下React和Vue项目中优雅地覆盖组件库样式的方法,希望对大家有所帮助!

通过9个Vue3 组件库,看看聊前端的流行趋势!通过9个Vue3 组件库,看看聊前端的流行趋势!May 07, 2022 am 11:31 AM

本篇文章给大家分享9个开源的 Vue3 组件库,通过它们聊聊发现的前端的流行趋势,希望对大家有所帮助!

react与vue的虚拟dom有什么区别react与vue的虚拟dom有什么区别Apr 22, 2022 am 11:11 AM

react与vue的虚拟dom没有区别;react和vue的虚拟dom都是用js对象来模拟真实DOM,用虚拟DOM的diff来最小化更新真实DOM,可以减小不必要的性能损耗,按颗粒度分为不同的类型比较同层级dom节点,进行增、删、移的操作。

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools