快捷導(dǎo)航

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

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

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

移動端開發(fā)，處理列表翻頁和數(shù)據(jù)的時(shí)候，下拉刷新和上拉加載應(yīng)用的比較廣泛，今天給大家推薦一個(gè)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)效果了，但是但是有幾個(gè)細(xì)節(jié)我必須提一下：

（1）高度的問題，這個(gè)插件需要給外層的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)用這個(gè)方法，這樣就可以把高度設(shè)置好，并且在任何位置都可以放置了

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

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

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

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

您可能感興趣的文章:

相關(guān)文章

vue返回上一頁面時(shí)回到原先滾動的位置的方法
這篇文章主要介紹了vue返回上一頁面時(shí)回到原先滾動的位置的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-12-12
結(jié)合mint-ui移動端下拉加載實(shí)踐方法總結(jié)
下面小編就為大家?guī)硪黄Y(jié)合mint-ui移動端下拉加載實(shí)踐方法總結(jié)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-11-11
使用Vue.js和Flask來構(gòu)建一個(gè)單頁的App的示例
本篇文章主要介紹了使用Vue.js和Flask來構(gòu)建一個(gè)單頁的App的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-03-03
vue中bus的使用及踩坑解決
這篇文章主要為大家詳細(xì)介紹了vue中bus的相關(guān)使用以及涉及到的問題與解決,文中的示例代碼簡潔易懂,感興趣的小伙伴可以跟隨小編一起了解一下
2023-08-08
Element通過v-for循環(huán)渲染的form表單校驗(yàn)的實(shí)現(xiàn)
日常業(yè)務(wù)開發(fā)中，form表單校驗(yàn)是一個(gè)很常見的問題，本文主要介紹了Element通過v-for循環(huán)渲染的form表單校驗(yàn)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-04-04
VUE axios發(fā)送跨域請求需要注意的問題
本篇文章主要介紹了VUE axios發(fā)送跨域請求需要注意的問題，在實(shí)際項(xiàng)目中前端使用到vue，后端使用php進(jìn)行開發(fā)。前端使用axios請求請求遇到的問題，有興趣的可以了解一下
2017-07-07
Vue使用虛擬dom進(jìn)行渲染view的方法
這篇文章主要介紹了Vue使用虛擬dom進(jìn)行渲染view的方法,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-12-12
Vue中使用JsonView來展示Json樹的實(shí)例代碼
這篇文章主要介紹了Vue之使用JsonView來展示Json樹的實(shí)例代碼，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-11-11
LRU算法在Vue內(nèi)置組件keep-alive中的使用
LRU算法全稱為least recently use 最近最少使用，核心思路是最近被訪問的以后被訪問的概率會變高，那么可以把之前沒被訪問的進(jìn)行刪除，維持一個(gè)穩(wěn)定的最大容量值，從而不會導(dǎo)致內(nèi)存溢出。
2021-05-05
微信小程序如何像vue一樣在動態(tài)綁定類名
這篇文章主要介紹了微信小程序如何像vue一樣在動態(tài)綁定類名,文中給大家提到了vue與微信小程序的區(qū)別，需要的朋友可以參考下
2018-04-04