資訊專(zhuān)欄INFORMATION COLUMN
摘要：移動(dòng)端開(kāi)發(fā)，處理列表翻頁(yè)和數(shù)據(jù)的時(shí)候，下拉刷新和上拉加載應(yīng)用的比較廣泛，今天給大家推薦一個(gè)的插件，，首先上圖話不多說(shuō)，上代碼了一引入并使用二在或者組件里面使用三在文件里面操作插件首先在在里面寫(xiě)上方法在里面實(shí)現(xiàn)申明好然后繼續(xù)在里面寫(xiě)上刷新和
移動(dòng)端開(kāi)發(fā)，處理列表翻頁(yè)和數(shù)據(jù)的時(shí)候，下拉刷新和上拉加載應(yīng)用的比較廣泛，今天給大家推薦一個(gè)vue的插件，vueScroll，首先上圖：
話不多說(shuō)，上代碼了：
一、引入并使用VueScroll
import VueScroller from "vue-scroller"; Vue.use(VueScroller)
二、在html或者.vue組件里面使用
三、在js文件里面操作插件
首先在在methods里面寫(xiě)上方法
在data里面實(shí)現(xiàn)申明好 isLoading = true;
然后繼續(xù)在methods里面寫(xiě)上刷新和加載的方法：
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）高度的問(wèn)題，這個(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)是絕對(duì)定位，所以一定要給外層設(shè)置好相對(duì)定位；
這樣就可以解覺(jué)定位引起的位置跑偏的問(wèn)題了。
參考文檔：https://vuescrolljs.yvescodin...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/102827.html
摘要：今天給大家分享上拉刷新，加載更多的組件的使用第一步安裝第二部配置第三部開(kāi)始使用內(nèi)容部分如下上拉加載已棄用，下拉刷新 今天給大家分享vue上拉刷新，加載更多的組件VueScroller的使用 第一步安裝： npm install vue-scroller -D 第二部配置 main.js import VueScroller from vue-scrollerVue.use(VueScr...
摘要：今天給大家分享上拉刷新，加載更多的組件的使用第一步安裝第二部配置第三部開(kāi)始使用內(nèi)容部分如下上拉加載已棄用，下拉刷新 今天給大家分享vue上拉刷新，加載更多的組件VueScroller的使用 第一步安裝： npm install vue-scroller -D 第二部配置 main.js import VueScroller from vue-scrollerVue.use(VueScr...
閱讀 853·2021-11-16 11:56
閱讀 1677·2021-11-16 11:45
閱讀 3124·2021-10-08 10:13
閱讀 4113·2021-09-22 15:27
閱讀 734·2019-08-30 11:03
閱讀 653·2019-08-30 10:56
閱讀 957·2019-08-29 15:18
閱讀 1750·2019-08-29 14:05
