Tutorial on using Vue mobile pull-down refresh components

Learn key sentences:

vant list component and pull-down refresh

vant pull-down refresh and local scroll conflict

Write in front

Every time! I mean every time I use the list component and the drop-down refresh in the vant component library

There will be a conflict between drop-down refresh and list sliding and local scrolling!

This makes me very difficult! I feel it!

This article provides 2 solutions from browsing the wonderful Internet and through my actual experience. Although I also saw that someone gave the solution to add overflow to the parent, I felt that it was fascinating and I don’t know what happened.

start

The first method should be a very convenient one, which is to modify the source code style. You can add the following code to your css. Note that if you are using local css, please use penetration or a new global style

.van-pull-refresh {
    height: calc(100vh - 100px) !important; // The 100px here needs to be handled according to your actual situation, which is the height part of the page that does not contain the list    overflow: auto !important;
}

But sometimes the first method does not work. In this case, I can only recommend that you use the native method scroll to determine whether you need to pull down and refresh.

The second type is to instantly determine whether the pull-down needs to be refreshed.

The principle of this method is that when the scrollTop of the list is 0, it means that the list has reached the top. When it reaches the top, it still pulls down, which means that you just want to refresh the list. If scrollTop is not equal to 0, it means that the list is just sliding down

Let's look at the properties required when using components

<van-pull-refresh
  	v-model="refreshing"	// Indicates whether it is refreshing. It will automatically change to true when pulling down. It needs to be manually set to false after the requested data is finished.  	@refresh="onRefresh"	// Pull down to refresh trigger method, change the page to 1 and request data  	:disabled="pullRefreshDisabled"	// Whether to disable the pull-down refresh method, it will not be able to pull-down refresh after being disabled. This value is controlled by scrolling the height of the list>
	<van-list
		 v-model:loading="loading"	// Is it in the load state? It will automatically become true when the list slides to the bottom. When it becomes true, the load event method will not be triggered.		 :finished="finished"	// Is it loaded?		 finished-text="No more" 
		 @load="onLoad" // Method to load new data. The mobile terminal usually passes in a new number of pages and adds the new data array to the original data array.		 @scroll="divScroll"	// Events triggered during scrolling to determine the current scrolling height	>
		<div v-for="(item, index) in data" :key="index">
			{{ item }}
		</div>
	</van-list>
</van-pull-refresh>

If you read the comments above, it is actually very simple. We monitor the scrolling height in real time in the divScroll method. When the scrolling height == 0, the pull-down refresh component can pull-down refresh function

const pullRefreshDisabled = ref(false)
const divScroll = (e: any) => {
    if ( == 0) {
         = false
    } else {
         = true
    }
}

After so long, I feel more and more that any one has gone to the world

The initial value is set to false to enable pull-down and refresh at the beginning. Don't mess it up. When pullRefreshDisabled is true, it cannot be refreshed. When false, it can be refreshed.

Finish

Emmm I used to resist using judgment scrolling to write this, but when I really wrote it, I said it's so good!

This is the article about using the Vue mobile pull-down refresh component. For more related contents of Vue drop-down refresh component, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!