Pull down to refresh and pull up to load
As a back-end who is not familiar with front-end development, I was confused at first about pull- down refresh and pull-up loading. I only know that they are all loading data. According to the general operation logic, it is generally swiping up and pulling up to load data. Why? To engage in pull down to refresh.
After seeing the example of vant's List component that can be used in conjunction with the PullRefresh component, I suddenly woke up.
Drop-down refresh, the focus is on refresh, the general operation is: clear the current list data, and reload the data from scratch.
Pull-up loading focuses on loading more data, that is, data that has not been loaded before.
Vant pull-up loading multiple repetitions
At the beginning, because I didn't understand the difference between pull-down refresh and pull-up loading, I always thought it was a repeated problem caused by pull-down refresh and pull-up loading at the same time.
Later, I only had the same problem with List. After researching it, I found that it is the problem of List itself. There are two reasons:
- List's onLoad operation is asynchronous
- If the number of pieces of data loaded in one request is small, so that the content of the list cannot fill the current screen, the List will continue to trigger the load event until the content fills the screen or the data is all loaded.
This will cause the onLoad operation to continue to be triggered after the completion of an onLoad operation, because the network operation is slow and the data has not been obtained, so the vant calculates according to the height and finds that the height is not enough, so it continues to trigger the onLoad operation. Similarly, it may be triggered n times.
Some friends may have doubts, obviously I have manually modified the loading, why does this phenomenon still occur.
First of all, loading does not need to be manually changed to true, because vant will automatically change loading to true after triggering the onLoad event, but you need to manually change loading to false in onLoad to indicate that the loading is complete, because when the loading is completed, vant does not know, only you knowledge.
Secondly, onLoad is an asynchronous operation, so in general, loading will not affect onLoad's repeated calls to data acquisition interfaces like getData.
Therefore, in the getData function, the loading can be judged first, and if it is true, it will be returned directly.
Of course, sometimes you want to distinguish, you can also define a new isGetData variable to control.
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<van-cell v-for="item in list" :key="item" :title="item" />
</van-list>
</van-pull-refresh>
export default {
data() {
return {
list: [],
loading: false,
finished: false,
refreshing: false,
isGetData: false,
};
},
methods: {
getData(){
if(this.isGetData){
return;
}
this.isGetData = true;
axios({}).then(res => {
}).catch(err => {
}).finally(() => {
this.isGetData = false;
})
},
onLoad() {
if (this.refreshing) {//下拉刷新，清空数据
this.list = [];
this.refreshing = false;
}
this.getData();
this.loading = false;
},
onRefresh() {
// 重新开始加载数据
this.finished = false;
// 手动触发onLoad，需要手动修改loading
this.loading = true;
this.onLoad();
},
},
};