Solve the pit of pull down refresh pull up loading etc. When vant frame makes H5

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

Description: overflow: auto is set; Under the premise of attributes, the H5 page can slide up and down in the PC browser, slide normally on ios, and cannot slide up and down on Android phones; This phenomenon is not a compatibility problem between ios and Android!

Reason: touch-action: none is set; This attribute is a local or global attribute, so annotate this attribute to slide normally.

2. Problems with pull-down refresh and pull-up load using PullRefresh and List lists

Problem 1. When you pull down and refresh on your mobile phone, no matter where you slide, just pull down and refresh

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

Problem 2. The list displayed during pull-up load always contains only the current 1 page, not the current page and the loaded 1 page

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

Problem 3. When dropping down, the bottom part of the page is obscured when there is little data

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

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

Problem 4. Repeated loading problem during pull-up loading

van-list attribute finished trigger time error, if directly placed in @ load method, will appear 1 direct request load

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

Note: The codes of pull-up refresh and pull-up loading are attached

<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.sync="error"
  finished-text=" All Loads 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(this.current, this.selectDisposeStatus,  this.searchValue).then(resp => {
  this.videoList = resp.data.records
  this.isVideoList = false
  if (this.videoList.length >= resp.data.total) {
   this.finished = true
  }
  }).catch(() => {
  this.error = true
  })
 },
 onRefresh() {
  this.current = 1
  this.getVideoList()
  this.isLoading = false
  this.$toast(' Refresh succeeded ')
 },
 onLoadList() {
  this.current++
  this.loading = false
  this.getVideoList()
  this.$toast(' Load succeeded ')
 },
} 
</script>

Additional knowledge: Property '$notify' must be of type 'ElNotification' Error occurred in Vant and Element-ui

Problems encountered:

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

The reason is that both component libraries add the $notify method to the application.

The solution is to install only one component library and import the other component library as needed

Example of error reporting:

npm install vant element-ui

vant and element-ui both have $notify methods that report errors

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

Vue.use(Vant);
Vue.use(ElementUI);

Solution:

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

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

Vue.use(Vant);
Vue.component('el-button', ElButton);

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