1. 頁面在手機(jī)端不能上下滑動(dòng)，在PC端瀏覽器正?；瑒?dòng)

說明：在設(shè)置了overflow:auto;屬性的前提下，H5頁面在PC端瀏覽器里展示可以上下滑動(dòng)，在ios上可正?；瑒?dòng)，在安卓手機(jī) 上不能上下滑動(dòng)；這現(xiàn)象并不是ios和安卓兼容性問題！

原因：設(shè)置了touch-action: none;這屬性為局部或者全局屬性，將這條屬性注釋即可正?；瑒?dòng)。

2.使用PullRefresh和List列表實(shí)現(xiàn)下拉刷新和上拉加載時(shí)出現(xiàn)的問題

問題1. 下拉刷新時(shí)在手機(jī)上，不論滑到任何位置，只要下拉就刷新

原因：滑動(dòng)的區(qū)間設(shè)置錯(cuò)了，此時(shí)滑動(dòng)的區(qū)間應(yīng)是此組件的父盒子，我將overflow:scroll設(shè)置給了最外層盒子

問題2. 上拉加載時(shí)展示的列表始終只包含當(dāng)前某一頁，而不是當(dāng)前頁和加載出的那一頁

原因：請(qǐng)求接口的參數(shù)不應(yīng)該是current++，也就是不應(yīng)該是當(dāng)前頁數(shù)+1，而是始終保持當(dāng)前頁數(shù)，請(qǐng)求的size=current*size

問題3. 下拉時(shí)，當(dāng)數(shù)據(jù)很少的情況下，頁面的最下面部分被遮住

原因：給van-list設(shè)置了height，且height: 80%，van-list必須設(shè)置高，否則無法滑動(dòng)

解決辦法：設(shè)置最小高：min-height: calc(100vh - 100px); overflow: hidden;

問題4.上拉加載時(shí)出現(xiàn)重復(fù)加載問題

van-list的屬性finished觸發(fā)時(shí)間錯(cuò)誤，如果直接放在@load方法中，則會(huì)出現(xiàn)一直請(qǐng)求加載

解決辦法：將finished=true放在請(qǐng)求接口返回?cái)?shù)據(jù)的方法里，當(dāng)當(dāng)前頁面數(shù)據(jù)大于等于返回的總條數(shù)，finished=true，顯示加載完成，不再觸發(fā)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="請(qǐng)求失敗，點(diǎn)擊重新加載"
  @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>

補(bǔ)充知識(shí)：Vant與Element-ui出現(xiàn)Property '$notify' must be of type 'ElNotification'錯(cuò)誤

遇到問題：

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'.

原因是兩個(gè)組件庫都在應(yīng)用上添加了 $notify 方法;

解決方法是：只安裝一個(gè)組件庫, 另一個(gè)組件庫按需引入

報(bào)錯(cuò)示例：

npm install vant element-ui

vant 和 element-ui 都有 $notify 方法, 會(huì)報(bào)錯(cuò)

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

// 按需引入你用到的組件, 而不是安裝整個(gè)組件庫
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時(shí)踩過的坑(下拉刷新、上拉加載等)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論