1. Detailed explanation of the use of v-infinite-scroll infinite scroll component
1、v-infinite-scroll="load" // Method of load infinite scrolling load 2、infinite-scroll-disabled //Does unlimited scroll loading be disabled 3、infinite-scroll-delay //The throttling delay, unit is ms 4、infinite-scroll-distance //The distance threshold for triggering loading is px 5、infinite-scroll-immediate //Whether to execute the loading method immediately to prevent the content from filling the container in the initial state. //By default, infinite-scroll-disabled is false. Therefore, if the component uses infinite scroll to load the component, the component will call the method even if the vue does not call the load method. Therefore, if you need control, try to use the infinite-scroll-disabled attribute to control whether the load method is called.
2. Causes and solutions for unlimited component loading
1. Problem: Using an infinitely loaded div without setting the height, resulting in infinitely loading
Solution:<div v-infinite-scroll="load" :infinite-scroll-disabled="isInfiniteScrollDisabled" style="margin-bottom: 20px;height:640px;overflow-y:auto" //The setting of style is very critical, be sure to set the height height >
The div used in the instruction must be limited to the height (height:xxx; overflow-y:auto). The load load method will be executed only when the bottom is pulled.
2. Question: Why is the load method not called in any life cycle in vue, and the method is loaded directly?
Solution: Use the :infinite-scroll-disabled="isInfiniteScrollDisabled" property to control.
3. Code demo demonstration
<template>
<div class="vue-class-name">
<div
v-infinite-scroll="load"
:infinite-scroll-disabled="isInfiniteScrollDisabled"
style="margin-bottom: 20px;height:640px;overflow-y:auto"
>
<div
v-for="item in dataList"
:key=""
style="display: inline-block;margin:0px 10px 10px 0px"
>
<span>{{item}}</span>
</div>
<el-empty
description="No Data"
v-if=" == 0"
style="height:650px;overflow-y:auto;text-align:center"
></el-empty>
<!-- thisdivMust place it in the commanddivin-->
<div align="center" v-if=" > 0">
<div class="drawer-footer">
<span v-if="pullStatus === $">
Pull up to load more
</span>
<span v-if="pullStatus === $">
loading
<i class="el-icon-loading"></i>
</span>
<span v-if="pullStatus === $">
no more data
</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'VueName',
mixins: [],
components: {},
props: {},
data: function() {
return {
pullStatus: this.$,
pageIndex: 1,
pageSize: 20,
dataList: [],
isInfiniteScrollDisabled: false,
};
},
computed: {},
watch: {
//Event listening: Make method calls when refreshing the browser page or switching projects projectSpaceId: function(value, oldValue) {
= [];
= 1;
= this.$;
();
},
},
created() {},
mounted() {
//As soon as you enter the page, make a method call ();
},
methods: {
getLoadMoreData() {
if ( != this.$) {
return;
}
= this.$;
= true;
let params = {};//Request parameters can be omitted (params).then(resp => {
if ( < ) {
= this.$;
} else {
++;
= this.$;
}
if ( > 0) {
= ();//Array stitching, get the spliced data }
= false;
});
},
},
beforeDestroy() {
= []; //Clear the array};
</script>
<style scoped></style>
//Constant definitionexport const STATUS= {
START: 0, // Pull-up load LOADING: 1, // loading NODATA: 2, // No more data};
3. Summary
Of course, there are many ways to optimize this component, such as: the following code can be drawn into a common component. Where this component is used, you only need to pass the current pullStatus state.
<div class="drawer-footer">
<span v-if="pullStatus === $">
Pull up to load more
</span>
<span v-if="pullStatus === $">
loading
<i class="el-icon-loading"></i>
</span>
<span v-if="pullStatus === $">
no more data
</span>
</div>
At the same time, it can also be encapsulated into a mixins. If the same project needs to be scrolled and paging in multiple places, the code will be more concise and convenient. Let me paste the code in mixins:
/**
* Unlimited scrolling of the page
*/
export default {
name: "infiniteScrollMixins",
data() {
return {
pullStatus: this.$,
pageIndex: 1,
pageSize: 20,
}
},
computed: {},
created() {},
methods: {
loadMoreData() {
if ( != this.$) {
return;
}
= this.$;
if() {
//The component using this mixins needs to define this method ();
}
},
setPullStatus(data = []) {
if ( < ) {
= this.$;
} else {
++;
= this.$;
}
}
},
beforeDestroy() {},
};
How to use encapsulated mixins?
1. Import: import name from ‘path’;
2. Statement: mixins: [mixins name],
3. At this time, data/methods/computes defined in mixins can be used directly in this component, and the variables of multiple components using mixins are independent of each other, and the modification of values will not affect each other in the component. (If you don’t understand it here, you can learn the relevant documents of mixins)
Summarize
This is the article about the use of v-infinite-scroll infinite scroll component in Element UI. For more related contents of v-infinite-scroll infinite scroll component, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!