vant 프레임이 H5를 만들 때 밟은 구덩이를 해결(하단 리셋, 업로드 등)

1. 페이지는 핸드폰 끝에서 위아래로 미끄러지지 않으며, PC쪽 브라우저에서 정상적으로 미끄러짐
설명:overflow:auto를 설정했습니다.속성의 전제에서 H5 페이지는 PC 사이드 브라우저에서 위아래로 미끄러질 수 있고ios에서는 정상적으로 미끄러질 수 있으며 안드로이드 핸드폰에서는 위아래로 미끄러질 수 없다.이 현상은 ios와 안드로이드의 호환성 문제가 아니다!
원인:touch-action:none을 설정했습니다.이 속성은 국부 또는 전역 속성으로 이 속성 주석을 사용하면 정상적으로 미끄러질 수 있습니다.
2. PullRefresh 및 List 목록을 사용하여 드롭다운 새로 고침 및 업로드 시 발생하는 문제
질문 1.드롭 다운 리셋 시 핸드폰에서 어느 위치로 미끄러지든 드롭 다운만 하면 리셋
원인: 미끄러지는 구간을 잘못 설정했습니다. 이때 미끄러지는 구간은 이 구성 요소의 부모 상자입니다. 오버플로우:scroll을 가장 바깥쪽 상자에 설정했습니다.
문제업로드할 때 보여 주는 목록은 현재 페이지와 업로드된 페이지가 아니라 현재 페이지만 포함됩니다.
원인: 요청 인터페이스의 매개 변수는current++가 아니라 현재 페이지 수+1이 아니라 현재 페이지 수를 시종일관 유지해야 합니다. 요청한size=current*size
질문드롭할 때, 데이터가 매우 적은 상황에서 페이지의 맨 아래 부분은 가려진다
원인:van-list에height를 설정하고height:80%,van-list는 반드시 높게 설정해야 합니다. 그렇지 않으면 미끄러질 수 없습니다
해결 방법: 최소 높이 설정:min-height:calc(100vh-100px);overflow: hidden;
문제업로드 시 중복 업로드 문제 발생
van-list의 속성finished 트리거 시간 오류, @load 방법에 직접 넣으면 계속 불러오기 요청이 발생합니다
해결 방법:finished=true를 요청 인터페이스에서 데이터를 되돌려주는 방법에 놓습니다. 현재 페이지의 데이터가 되돌아오는 총 항목보다 크면finished=true는 불러오는 작업이 완료되었음을 표시하고load 불러오는 이벤트를 더 이상 터치하지 않습니다.
참고: 드롭다운 새로 고침, 드롭다운 부분의 코드 부착

<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=" "
  error-text=" ， "
  @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(' ')
 },
 onLoadList() {
  this.current++
  this.loading = false
  this.getVideoList()
  this.$toast(' ')
 },
} 
</script>

보충 지식: Vant와 Element-ui에 Property'$notify'가 나타나면 type'ElNotification'오류가 발생해야 합니다.
문제 발생:
ERROR in/Users/oyo/projects/dataplatform/coconut/node_modules/vant/types/notify.d.ts 33:5 Subsequent property declarations must have the same type. Property ‘$notify' must be of type ‘ElNotification', but here has type ‘Notify'.
두 구성 요소 라이브러리 모두 응용 프로그램에 $notify 방법을 추가했기 때문이다.
해결 방법: 하나의 구성 요소 라이브러리만 설치하고 다른 구성 요소 라이브러리는 필요에 따라 도입하는 것이다
오류 발생 예:
npm install vant element-ui
vant와element-ui 모두 $notify 방법이 있습니다. 오류가 발생합니다.

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);

솔루션:

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

//  ,  
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": {
  //  
  "element-ui/lib/button": ["node_modules/element-ui/types/button"]
 }
 }
}

이상에서 vant 프레임워크를 해결하고 H5를 할 때 밟은 구덩이(하단 리셋, 상단 로드 등)가 바로 편집자가 여러분께 공유한 모든 내용입니다. 참고 부탁드리고 저희도 많이 사랑해 주세요.