About how Vue.js implements infinite scroll loading
Below I will share with you an article on how to implement infinite scrolling and loading more methods using the Vue.js mobile component library mint-ui. It has a good reference value and I hope it will be helpful to everyone.
Through crawling many times, I discovered the commonality of these monitoring scrolling to load more components,
Because these methods of loading more are bound to the need to load more content. on the element,
So when entering the page, it will be triggered directly once. After the scroll event is monitored, continue to load more,
So there is no need to write the first load list for infinite scroll loading. The function,
code is as follows:
html:
//父组件
<p v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="1000">
<LifeLists :loadingTextBtn="loadingTextBtn" :loadingText="loadingText" :loadingComplete="loadingComplete" :lifeList="lifeList"></LifeLists>
</p>
//LifeLists组件：
<LifeListItem :lists="lifeList"></LifeListItem>
<p class="loading-text" v-show="{loadingTextBtn:true}">
<span v-text="loadingText"></span>
<mt-spinner v-if="(loadingComplete==false)" type="snake" :size="16"></mt-spinner>
</p>
LifeListItem组件：
<p id="lifeListItemBox">
<router-link v-for="(item,index) in lists" :to="{name:'lifeDetails',params:{id:item.id}}" :key="index">
<p class="lifeListItem1" v-if="(item.status=='online')">
<p v-if="(item.hasPrice==true)">
<p class="title1">{{item.title}}</p>
<p class="price">
<b class="now"><span class="unit">{{item.monetaryUnit}}</span>{{item.price}}</b>
</p>
</p>
<p v-else class="title2">{{item.title}}</p>
<p class="info">
发布于{{formatTime(item.createAt)}}
{{item.countryName}} {{item.cityName}}
</p>
<p class="imageList">
<img :src="img" alt="" v-for="(img,index) in item.photos">
</p>
<p class="content">{{item.detail}}</p>
<p class="listBar">
<p class="iconBox">
<svg class="icon icon-dianzan" aria-hidden="true">
<use xlink:href="#icon-dianzan" rel="external nofollow" ></use>
</svg>
{{item.like}}
</p>
<p class="iconBox">
<svg class="icon icon-pinglun2" aria-hidden="true">
<use xlink:href="#icon-pinglun2" rel="external nofollow" ></use>
</svg>
{{item.commentCount}}
</p>
</p>
</p>
</router-link>
</p>vue. js
data:
page:0, size:10, loadingTextBtn:false, loadingText:"努力加载中", loadingComplete:false, refreshComplete:false, city:"", country:""
methods:
loadMore() {
this.loading = true;
this.loadingTextBtn=true;
if(parseInt(this.page)==0){
this.$store.dispatch('loadMoreLifeList',{city:"纽约",country:"美国",category:"",page:this.page,size:this.size});
this.page++;
}else if(parseInt(this.page)>0&&parseInt(this.page)<parseInt(this.totalPages)){
setTimeout(() => {
// this.$store.dispatch('loadMoreLifeList',{city:this.city,country:this.country,category:"",page:this.page,size:this.size})
this.$store.dispatch('loadMoreLifeList',{city:"纽约",country:"美国",category:"",page:this.page,size:this.size});
this.page++;
}, 1000);
}else{
this.loadingText="已全部加载完成";
this.loadingComplete=true;
this.loading = false;
}
},The important thing here is to judge that when the current page is 0, that is, the first page, no A setTimeout timer is required to request loading directly. When more is loaded, a timer can be added.
I found a lot of mint-ui loadmore components on the Internet to implement pull-up to load more. Since the pull-up triggers the corresponding load more event, the data should not be automatically loaded when entering the page, so here You can add a function to get the first page of data.
The above is the text I compiled, I hope it will be helpful to everyone
Related articles:
Issues related to webpack3 speed optimization in vue-cli
Explain in detail the use of abs in EasyUI
How to implement interactive tabs in zTree
The above is the detailed content of About how Vue.js implements infinite scroll loading. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to use mobile gesture operations in Vue projects
Oct 08, 2023 pm 07:33 PM
How to use mobile gesture operations in Vue projects With the popularity of mobile devices, more and more applications need to provide a more friendly interactive experience on the mobile terminal. Gesture operation is one of the common interaction methods on mobile devices, which allows users to complete various operations by touching the screen, such as sliding, zooming, etc. In the Vue project, we can implement mobile gesture operations through third-party libraries. The following will introduce how to use gesture operations in the Vue project and provide specific code examples. First, we need to introduce a special
Solve the problem of multi-touch points on Vue mobile terminal
Jun 30, 2023 pm 01:06 PM
In mobile development, we often encounter the problem of multi-finger touch. When users use multiple fingers to swipe or zoom the screen on a mobile device, how to accurately recognize and respond to these gestures is an important development challenge. In Vue development, we can take some measures to solve the problem of multi-finger touch on the mobile terminal. 1. Use the vue-touch plug-in vue-touch is a gesture plug-in for Vue, which can easily handle multi-finger touch events on the mobile side. We can install vue-to via npm
Vue component library recommendation: Quasar in-depth analysis
Nov 24, 2023 am 08:37 AM
Vue component library recommendation: Quasar in-depth analysis introduction: Vue.js is a popular JavaScript framework for building user interfaces. Its ease of use and flexibility make it the first choice among developers. Quasar is a comprehensive UI component library based on Vue.js. It provides a large number of easy-to-use components and tools, which can help us quickly build beautiful and feature-rich web applications. This article will conduct an in-depth analysis of Quasar, explore its internal mechanisms, and provide specific code examples.
How to create an infinite scrolling news list using HTML, CSS and jQuery
Oct 24, 2023 am 11:00 AM
How to create an infinite scrolling news list using HTML, CSS and jQuery In web development, infinite scrolling is a common interaction technology, especially suitable for pages such as news lists that need to load a large amount of data. This article will introduce how to use HTML, CSS and jQuery to implement an infinite scrolling news list, and provide specific code examples. First, we need a basic HTML structure to display the news list. Here's a simple example: <!DOCTYPE
How to implement infinite scrolling to optimize application performance through Vue's virtual list
Jul 17, 2023 am 08:55 AM
How to optimize application performance through infinite scrolling through Vue's virtual list. As the complexity of front-end applications continues to increase, especially when processing large amounts of data, some performance issues also arise. In this regard, Vue provides a powerful tool - virtual list (VirtualList), which can greatly improve application performance when processing large amounts of data by dynamically rendering visible elements in the list. This article will introduce how to use Vue's virtual list to implement infinite scrolling and optimize application performance. We will use a virtual address book
Vue component library recommendation: Element Plus in-depth analysis
Nov 24, 2023 am 08:36 AM
Vue is a popular JavaScript framework that is not only easy to learn and use, but also flexible and extensible. Its component library ElementPlus is a UI component library developed based on Vue3, with rich components and functions. This article will provide an in-depth analysis of ElementPlus and provide specific code examples. 1. What is ElementPlusElementPlus is a component library based on Vue3, which is ElementUI
What is the difference between css framework and component library
Dec 26, 2023 pm 05:03 PM
CSS framework and component library are two different concepts, but there is a certain relationship between them: 1. CSS framework is a tool that provides a complete set of styles, layouts and components, while component library is for a specific A library for designing and developing components or modules; 2. The CSS framework is used to quickly build web pages and applications, and the component library provides a series of reusable UI components; 3. The framework usually contains a series of predefined CSS Classes and styles, while each component in the component library has independent styles and behaviors.
How to use JavaScript to achieve the infinite scroll effect of automatically loading when scrolling to the bottom of the page?
Oct 27, 2023 pm 06:30 PM
How does JavaScript achieve the infinite scroll effect of automatically loading when scrolling to the bottom of the page? The infinite scroll effect is one of the common features in modern web development. It can automatically load more content when scrolling to the bottom of the page, allowing users to obtain more data or resources without manually clicking buttons or links. In this article, we'll explore how to use JavaScript to achieve this functionality and provide specific code examples. To achieve the infinite scrolling effect of automatically loading when scrolling to the bottom of the page, it is mainly divided into the following
