Solve the pitfalls that the vant framework has stepped on when doing H5 (pull down refresh, pull-up loading, etc.)

1. The page cannot slide up and down on the mobile phone, and the browser on the PC side normally

Note: On the premise that the overflow:auto; attribute is set, the H5 page can slide up and down in the PC browser, and can slide normally on iOS, but cannot slide up and down on Android phones; this phenomenon is not a compatibility issue between iOS and Android!

Reason: touch-action: none; This property is set as a local or global property, and you can slide normally by commenting this property.

2. Problems occur when using PullRefresh and List list to implement pull-down refresh and pull-up loading

Question 1.When pulling down to refresh, it will refresh if it slides to any position.

Reason: The sliding interval is set incorrectly. At this time, the sliding interval should be the parent box of this component. I set the overflow:scroll to the outermost box

Question 2.The list displayed when loading is loaded always contains only the current page, not the current page and the loaded page.

Reason: The parameter of the request interface should not be current++, that is, it should not be current page number + 1, but always maintain the current page number, and the requested size=current*size

Question 3.When pulling down, when there is very little data, the bottom part of the page is blocked

Reason: Set height for van-list, and height: 80%. van-list must be set high, otherwise it cannot slide.

Solution: Set minimum height: min-height: calc(100vh - 100px); overflow: hidden;

Question 4.Duplicate loading problem occurred while pulling up

The van-list attribute finished triggers the time error. If placed directly in the @load method, a request to load will occur.

Solution: Put finished=true in the method of requesting the interface to return data. When the current page data is greater than or equal to the total number of returned entries, finished=true will display that the load is completed and the load load event will no longer be triggered.

Note: Attach the code to refresh and load the part with the pull-up

<template>
<van-pull-refresh v-model="isLoading" :head-height="20" @refresh="onRefresh">
  <van-list
  v-model="loading"
  :finished="finished"
  :offset="1"
  :immediate-check="false"
  :="error"
  finished-text="All loaded complete"
  error-text="Request failed, click Reload"
  @load="onLoadList"
  >
  </van-list>
</van-pull-refresh>
</template>

<script>
data(){
 return {
 isLoading: false,
 finished: false,
 loading: false,
 }
},
methods:{
 getVideoList() {
  getVideoList(, ,  ).then(resp => {
   = 
   = false
  if ( >= ) {
    = true
  }
  }).catch(() => {
   = true
  })
 },
 onRefresh() {
   = 1
  ()
   = false
  this.$toast('Refreshed successfully')
 },
 onLoadList() {
  ++
   = false
  ()
  this.$toast('Loading successfully')
 },
} 
</script>

Supplementary knowledge:Vant and Element-ui experience Property '$notify' must be of type 'ElNotification' error

Encountered with problems:

ERROR in /Users/oyo/projects/dataplatform/coconut/node_modules/vant/types/ 33:5 Subsequent property declarations must have the same type. Property ‘$notify' must be of type ‘ElNotification', but here has type ‘Notify'.

The reason is that both component libraries have added the $notify method on the application;

The solution is:Only one component library is installed, and another component library is introduced as needed

Error report example:

npm install vant element-ui

vant and element-ui have $notify methods, and an error will be reported.

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/';

(Vant);
(ElementUI);

Solution:

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/';

//Introduce the components you use as needed, instead of installing the entire component libraryimport ElButton from 'element-ui/lib/button';
import 'element-ui/lib/theme-chalk/';

(Vant);
('el-button', ElButton);

{
 "compilerOptions": {
 "paths": {
  // Point to the correct declaration map  "element-ui/lib/button": ["node_modules/element-ui/types/button"]
 }
 }
}

The above article solves the pitfalls that the vant framework has stepped on when making H5 (pull down refresh, pull-up loading, etc.) is all the content I share with you. I hope it can give you a reference and I hope you can support me more.