欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

解決vant框架做H5時踩過的坑(下拉刷新、上拉加載等)

 更新時間:2020年11月11日 09:53:45   作者:zlinger1  
這篇文章主要介紹了解決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 實現預編譯提升構建速度

    這篇文章主要介紹了vue-cli3使用 DllPlugin 實現預編譯提升構建速度 ,需要的朋友可以參考下
    2019-04-04
  • 關于Pinia狀態(tài)管理解讀

    關于Pinia狀態(tài)管理解讀

    這篇文章主要介紹了Pinia狀態(tài)管理解讀,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-07-07
  • vue監(jiān)聽頁面滾動到某個高度觸發(fā)事件流程

    vue監(jiān)聽頁面滾動到某個高度觸發(fā)事件流程

    這篇文章主要介紹了vue監(jiān)聽頁面滾動到某個高度觸發(fā)事件流程,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue控制臺警告Runtime directive used on component with non-element root node

    vue控制臺警告Runtime directive used on compon

    這篇文章主要為大家介紹了vue控制臺警告Runtime directive used on component with non-element root node解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-06-06
  • vue+echarts實現動態(tài)折線圖的方法與注意

    vue+echarts實現動態(tài)折線圖的方法與注意

    這篇文章主要給大家介紹了關于vue+echarts實現動態(tài)折線圖的方法與注意事項,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-09-09
  • Vue中如何對ElementUI的Dialog組件封裝

    Vue中如何對ElementUI的Dialog組件封裝

    這篇文章主要介紹了Vue中如何對ElementUI的Dialog組件封裝問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-03-03
  • Vue3在Setup中使用axios請求獲取的值方式

    Vue3在Setup中使用axios請求獲取的值方式

    這篇文章主要介紹了Vue3在Setup中使用axios請求獲取的值方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-06-06
  • vite項目如何從0開始配置eslint

    vite項目如何從0開始配置eslint

    這篇文章主要介紹了vite項目如何從0開始配置eslint問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • vue中axios解決跨域問題和攔截器的使用方法

    vue中axios解決跨域問題和攔截器的使用方法

    下面小編就為大家分享一篇vue中axios解決跨域問題和攔截器的使用方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • Vue3中無法為el-tree-select設置反選問題解析

    Vue3中無法為el-tree-select設置反選問題解析

    這篇文章主要介紹了Vue3中無法為el-tree-select設置反選問題分析,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-04-04

最新評論