当前位置: 首页 > Web前端 > HTML5

vueScroll

时间:2023-04-05 00:49:49 HTML5

用于移动端下拉刷新和上拉加载对于移动端开发,在处理列表翻页和数据时,广泛使用下拉刷新和上拉加载。今天给大家推荐一款vue插件vueScroll。先上图:废话不多说,下面是代码:ImportanduseVueScrollimportVueScrollerfrom'vue-scroller';vue.use(VueScroller)2.在html或者.vue组件中使用3.在js文件中操作插件先在methods中写好方法,在data中实现isLoading=true;然后继续在methods中写刷新加载的方法:refresh(done){lettimer=null;这个.page=1;清除超时(计时器);timer=setTimeout(()=>{this.myInstalHomeFun(done);},500);},infinite(done){让timer=null;清除超时(计时器);timer=setTimeout(()=>{this.myInstalHomeFun(done);},500);}到这里可以实现效果,但是有几个细节不得不提一下:(1)高度的问题,this插件需要设置outerscroller的高度,注意,这里是我的操作方法:methods:{//获取高度getHeight(){letbodyHeight=document.documentElement.clientHeight;让scroller=this.$refs.scroller;让scrollerTop=scroller.getBoundingClientRect().top;scroller.style.height=(bodyHeight-scrollerTop)+"px";},}并在mounted中调用此方法方法,这样可以很好的设置高度,可以放在任意位置(2)vueScoller内部结构是绝对定位,所以需要在外层设置相对定位;这样定位造成的位置就可以理解了。偏题。参考文档:https://vuescrolljs.yvescodin...