van-list constantly loading pit of onLoad
When van-list is pulled down, it is really a pitfall to constantly request the background to load data. . . .
this.$(url, params).then(function (res) {
= [];
if ( == 0) {
= true
} else {
= [... , ...]
}
= false
}).catch((reason) => {
("Query list data!" + reason);
})First of all, let’s talk about a situation where continuous loading occurs. The solution is to set: offset="20";
This is often said online, but it is of no use. . .
The reason why I keep loading here is
= [];
If you are cheating, you cannot clear it. After clearing it, you will judge that the space has not been filled and will continue to load. . . .
van-list drop-down loads more onLoad events
van-list is a waterfall flow scroll load that displays long lists that trigger events and load more list items when the list is about to scroll to the bottom.
Introduced
import Vue from 'vue';
import { List } from 'vant';
(List);Page Rendering
<van-list class="mylist"
v-model="loading"
:finished="finished"
finished-text="No more"
@load="onLoad" >
<van-cell v-for="(item,index) in list" :key="index" class="mycell">
{{}}
</van-cell>
</van-list>Data definition
export default {
data() {
return {
list: [],
loading: false,
finished: false,
total: 0,
// Query parameters queryParams: {
pageNum: 0,
pageSize: 6,
deptname: null,
username: null,
createTime: null,
jigou: null,
},
defaultdept:null,
keyWords:"",
};
},
}Method implementation
methods:{
async onLoad() {
= true;//Prevent the first page from loading repeatedly =
listWuzicount().then(res => {
= ;
if( <= ){
=
}else{
++;
let arr = ;
= (arr);
};
// Loading status ends = false;
// All data is loaded if ( >= ) {
= true;
}
})
},
},
watch:{
defaultdept(val){
= val
= []
= 1
= false;
();
},
keyWords(val){
= val
= []
= 1
= false;
();
},
}Key summary
= 1 //Every time you finish the function, restore the current page to 1 to prevent it from being accumulated later, resulting in invalid clicking on other filter conditions, and return to finished-text = false; //same，Alsofinishedrecover，otherwise，When performing other filter conditions，Will displayfinished-text,And it also leads to data,But it won't load.
The above is personal experience. I hope you can give you a reference and I hope you can support me more.