vueScroll實(shí)現(xiàn)移動端下拉刷新、上拉加載

更新時間：2019年03月22日 14:38:04 作者：dragonจุ๊บ

這篇文章主要介紹了vueScroll實(shí)現(xiàn)移動端下拉刷新、上拉加載，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

移動端開發(fā)，處理列表翻頁和數(shù)據(jù)的時候，下拉刷新和上拉加載應(yīng)用的比較廣泛，今天給大家推薦一個vue的插件，vueScroll，首先上圖：

話不多說，上代碼了：

一、引入并使用VueScroll

import VueScroller from 'vue-scroller';
Vue.use(VueScroller)

二、在html或者.vue組件里面使用

三、在js文件里面操作插件

首先在在methods里面寫上方法

在data里面實(shí)現(xiàn)申明好 isLoading = true;

然后繼續(xù)在methods里面寫上刷新和加載的方法：

refresh(done) {
  let timer = null;
  this.page = 1;
  clearTimeout(timer);
  timer = setTimeout(() => {
     this.myInstalHomeFun(done);
  }, 500);
},
infinite(done) {
  let timer = null;
  clearTimeout(timer);
  timer = setTimeout(() => {
     this.myInstalHomeFun(done);
  }, 500);
}

到這里就可以實(shí)現(xiàn)效果了，但是但是有幾個細(xì)節(jié)我必須提一下：

（1）高度的問題，這個插件需要給外層的scroller 設(shè)置高度，所以要注意，我這里是這樣操作的：

methods: {
    // 獲取高度
    getHeight(){
      let bodyHeight = document.documentElement.clientHeight;
      let scroller = this.$refs.scroller;
      let scrollerTop = scroller.getBoundingClientRect().top;
      scroller.style.height = (bodyHeight-scrollerTop)+"px";
    },
}

并且在mounted里面調(diào)用這個方法，這樣就可以把高度設(shè)置好，并且在任何位置都可以放置了

（2）vueScoller 內(nèi)部的結(jié)構(gòu)是絕對定位，所以一定要給外層設(shè)置好相對定位；

這樣就可以解覺定位引起的位置跑偏的問題了。

參考文檔：https://vuescrolljs.yvescoding.org

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解vue中v-on事件監(jiān)聽指令的基本用法
這篇文章主要介紹了詳解vue中v-on事件監(jiān)聽指令的基本用法，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下
2020-07-07
基于Vue實(shí)現(xiàn)文件上傳的幾種實(shí)現(xiàn)方式
文件上傳是web開發(fā)中一個常見的需求,Vue.js作為一款流行的前端框架,也提供了方便的方法來實(shí)現(xiàn)文件上傳功能,下面這篇文章主要給大家介紹了關(guān)于基于Vue實(shí)現(xiàn)文件上傳的幾種實(shí)現(xiàn)方式,需要的朋友可以參考下
2024-03-03
Vue組件設(shè)計(jì)之多列表拖拽交換排序功能實(shí)現(xiàn)
這篇文章主要介紹了Vue組件設(shè)計(jì)之多列表拖拽交換排序,常見的場景有單列表拖拽排序，多列表拖拽交換排序，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-05-05
vue3中實(shí)現(xiàn)圖片壓縮的示例代碼
圖片壓縮是一種比較便捷的壓縮方式,本文主要介紹了vue3中實(shí)現(xiàn)圖片壓縮的示例代碼,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2024-02-02
Vite配置路徑別名的簡單實(shí)現(xiàn)方法
Vite項(xiàng)目中我們可以手動將src路徑設(shè)置**@**路徑別名,可以省下很多引入路徑的冗余路徑,下面這篇文章主要給大家介紹了關(guān)于Vite配置路徑別名的簡單實(shí)現(xiàn)方法,需要的朋友可以參考下
2023-04-04
Antd的table組件表格的序號自增操作
這篇文章主要介紹了Antd的table組件表格的序號自增操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
Vue + Node.js + MongoDB圖片上傳組件實(shí)現(xiàn)圖片預(yù)覽和刪除功能詳解
這篇文章主要介紹了Vue + Node.js + MongoDB圖片上傳組件實(shí)現(xiàn)圖片預(yù)覽和刪除功能,結(jié)合實(shí)例形式詳細(xì)分析了Vue + Node.js + MongoDB基于圖片上傳組件實(shí)現(xiàn)圖片預(yù)覽和刪除功能相關(guān)操作技巧,需要的朋友可以參考下
2020-04-04
Vue中provide和inject的使用教程詳解
在?Vue?中,provide?和?inject?是用于實(shí)現(xiàn)祖先組件向后代組件傳遞數(shù)據(jù)的一種方式,本文主要來和大家詳細(xì)講講provide和inject的使用方法,希望對大家有所幫助
2024-02-02
簡單實(shí)現(xiàn)一個vue公式編輯器組件demo
這篇文章主要介紹了輕松實(shí)現(xiàn)一個簡單的vue公式編輯器組件示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2024-01-01
Vue3不支持Filters過濾器的問題
這篇文章主要介紹了Vue3不支持Filters過濾器的問題,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-09-09