解決vant框架做H5時踩過的坑(下拉刷新、上拉加載等)
1. 頁面在手機端不能上下滑動,在PC端瀏覽器正常滑動
說明:在設置了overflow:auto;屬性的前提下,H5頁面在PC端瀏覽器里展示可以上下滑動,在ios上可正?;瑒?,在安卓手機 上不能上下滑動;這現象并不是ios和安卓兼容性問題!
原因:設置了touch-action: none;這屬性為局部或者全局屬性,將這條屬性注釋即可正?;瑒?。
2.使用PullRefresh和List列表實現下拉刷新和上拉加載時出現的問題
問題1. 下拉刷新時在手機上,不論滑到任何位置,只要下拉就刷新
原因:滑動的區(qū)間設置錯了,此時滑動的區(qū)間應是此組件的父盒子,我將overflow:scroll設置給了最外層盒子
問題2. 上拉加載時展示的列表始終只包含當前某一頁,而不是當前頁和加載出的那一頁
原因:請求接口的參數不應該是current++,也就是不應該是當前頁數+1,而是始終保持當前頁數,請求的size=current*size
問題3. 下拉時,當數據很少的情況下,頁面的最下面部分被遮住
原因:給van-list設置了height,且height: 80%,van-list必須設置高,否則無法滑動
解決辦法:設置最小高:min-height: calc(100vh - 100px); overflow: hidden;
問題4.上拉加載時出現重復加載問題
van-list的屬性finished觸發(fā)時間錯誤,如果直接放在@load方法中,則會出現一直請求加載
解決辦法:將finished=true放在請求接口返回數據的方法里,當當前頁面數據大于等于返回的總條數,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="請求失敗,點擊重新加載" @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' must be of 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時踩過的坑(下拉刷新、上拉加載等)就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
vue-cli3使用 DllPlugin 實現預編譯提升構建速度
這篇文章主要介紹了vue-cli3使用 DllPlugin 實現預編譯提升構建速度 ,需要的朋友可以參考下2019-04-04vue監(jiān)聽頁面滾動到某個高度觸發(fā)事件流程
這篇文章主要介紹了vue監(jiān)聽頁面滾動到某個高度觸發(fā)事件流程,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04vue控制臺警告Runtime directive used on compon
這篇文章主要為大家介紹了vue控制臺警告Runtime directive used on component with non-element root node解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-06-06Vue3中無法為el-tree-select設置反選問題解析
這篇文章主要介紹了Vue3中無法為el-tree-select設置反選問題分析,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04