vueScroll在移动终端上实现下拉刷新和上拉加载

在移动端开发处理列表翻页和数据时，广泛使用下拉刷新和上拉加载。今天推荐一个vue的插件，vueScroll，首先上图：

不多说，在代码上：

首先，介绍并使用VueScroll

从“vue-scroller”导入VueScroller第二，在html或。vue组件

第三，操作js文件中的插件

首先，在方法中写入方法

在数据中实现声明。isLoading=true

然后继续在方法中编写刷新和加载方法：

刷新(完成){让计时器=nullthis . page=1；clearTimeout(计时器)；timer=setTimeout(()={ this . myinstallhomefun(done)；}, 500);}，无穷大(done) {让timer=nullclearTimeout(计时器)；timer=setTimeout(()={ this . myinstallhomefun(done)；}, 500);}这里可以达到效果，但有几个细节我必须提一下：

(1)高度的问题，这个插件需要设置外滚动条的高度，所以这里注意以下操作：

methods : {//get height get height(){让body height=document . document element . client height；让scroller=这个。$ refs.scroller让scroller top=scroller . getboundingclientrect()。顶部；scroller . style . height=(body height-scroller top)“px”；}，}并在mounted中调用此方法，以便可以设置高度并将其放置在任何位置

(2)2)vueScoller的内部结构是绝对定位的，所以需要设置外层的相对定位；

这样就可以解决定位带来的位置偏差问题。

参考文件：https://vuescrolljs.yvescoding.org

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。