vue.js怎么实现拉加载以及下拉刷新功能
本篇内容主要讲解“vue.js怎么实现拉加载以及下拉刷新功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue.js怎么实现拉加载以及下拉刷新功能”吧!
成都创新互联公司凭借专业的设计团队扎实的技术支持、优质高效的服务意识和丰厚的资源优势,提供专业的网站策划、成都网站建设、成都做网站、网站优化、软件开发、网站改版等服务,在成都10余年的网站建设设计经验,为成都成百上千中小型企业策划设计了网站。
上拉加载以及下拉刷新都是移动端很常见的功能,在搜索或者一些分类列表页面常常会用到。
跟横向滚动一样,我们还是采用better-scroll这个库来实现。由于better已经更新了新的版本,之前是0.几的版本,更新了一下发现,现在已经是1.2.6这个版本了,新版本多了些 比较好用的api,所以我也重写了之前的代码,用新的api来实现上拉加载以及下拉刷新。
首先把基本的样式写好,这里就略过了,然后引入better-scroll库
import BScroll from 'better-scroll'
其次,在mounted生命周期实例化scroll,可以获取完数据后再new,也可以先new后,获取完数据调用refresh。
实例时需要传入一个配置参数,由于参数比较多,具体的请参考文档,这里只讲2个重点的:
//是否开启下拉刷新,可传入true或者false,如果需要更多配置可以传入一个对象 pullDownRefresh:{ threshold:80, stop:40 } //是否开启上拉加载,同上,上拉无stop参数,这里需要注意是负数 pullUpLoad:{ threshold:-80, } /** * * @param threshold 触发事件的阀值,即滑动多少距离触发 * @param stop 下拉刷新后回滚距离顶部的距离(为了给loading留出一点空间) */
以上的数字个人感觉比较合适,但是这里有一个问题,由于我采用的是淘宝flexible.js来适配,这就导致:在安卓下80这个距离是合适的,但是到了iphone6s下,由于被缩放了3陪,所以现在80在iphone6s下就是27左右了。
所以,对于不同缩放程度的屏幕,还需要乘以对应的缩放比。
淘宝flexible.js里面其实已经有这个获取屏幕缩放比方法,这里直接从里面拿:
//在util.js里面加一个方法 export function getDeviceRatio(){ var isAndroid = window.navigator.appVersion.match(/android/gi); var isIPhone = window.navigator.appVersion.match(/iphone/gi); var devicePixelRatio = window.devicePixelRatio; var dpr; if (isIPhone) { // iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案 if (devicePixelRatio >= 3) { dpr = 3; } else if (devicePixelRatio >= 2){ dpr = 2; } else { dpr = 1; } } else { // 其他设备下,仍旧使用1倍的方案 dpr = 1; } return dpr }
import{ DEVICE_RATIO} from '../base/js/api.js' /*获取当前缩放比*/ const DEVICE_RATIO=getDeviceRatio(); /*下拉配置*/ const DOWN_CONFIG={ threshold:80*DEVICE_RATIO, stop:40*DEVICE_RATIO } /*上拉配置*/ const UP_CONFIG={ threshold:-80*DEVICE_RATIO, } this.scroller = new BScroll(scrollWrap,{ click:true, probeType:3, pullDownRefresh:DOWN_CONFIG, pullUpLoad:UP_CONFIG });
实例化后,接下来就是监听上拉和下拉事件了。betterScroll新增了一些事件,主要的有:
/*下拉事件*/ this.scroller.on('pullingDown',()=> {}); /*上拉事件*/ this.scroller.on('pullingUp',()=>{});
触发上拉或者下拉事件后,需要我们调用 this.scroller.finishPullDown() 或者 this.scroller.finishPullUp() 来通知better-scroll事件完成。
大致的流程是这样的:
this.scroller.on('pullingDown',()=> { });
通常操作完成后都需要我们手动触发refresh方法来重新计算可滚动的距离,因此可以写一个watch监听数据的变化,这样我们只需要改变数据,不用每次操作数据后都调用refresh方法。
watch:{ dataList(){ this.$nextTick(()=>{ this.scroller.refresh(); }) } },
如果你使用的版本还是旧的,那可以在on( scroll )事件的时候进行判断来实现功能
this.scroller.on("scroll",(pos)=>{ //获取整个滚动列表的高度 var height=getStyle(scroller,"height"); //获取滚动外层wrap的高度 var pageHeight=getStyle(scrollWrap,"height"); //触发事件需要的阀值 var distance=80*DEVICE_RATIO; //参数pos为当前位置 if(pos.y>distance){ //console.log("下拉"); //do something }else if(pos.y-pageHeight<-height-distance){ //console.log("上拉"); //do something }
为了防止多次触发,需要加2个开关类的东西;
var onPullUp=true; var onPullDown=true;
每次触发事件时,將对应的开关设置为false, 等操作完成后,再重新设置为true,否则多次下拉或者上拉就会触发多次事件。通过设置开关可以保证每次只有一个事件在进行。
最后,来封装成一个组件
由于每个页面需要滚动的具体内容都是不一样的,所以用了一个插槽来分发。
组件需要的参数由父级传入,通过prop来接收并设置默认值
export default { props: { dataList:{ type: Array, default: [] }, probeType: { type: Number, default: 3 }, click: { type: Boolean, default: true }, pullDownRefresh: { type: null, default: false }, pullUpLoad: { type: null, default: false }, }
组件挂载后,在事件触发时并不直接处理事件,而是向父级发送一个事件,父级通过在模板v-on接收事件并处理后续的逻辑
mounted() { this.scroll = new BScroll(this.$refs.wrapper, { probeType: this.probeType, click: this.click, pullDownRefresh: this.pullDownRefresh, pullUpLoad: this.pullUpLoad, }) this.scroll.on('pullingUp',()=> { if(this.continuePullUp){ this.beforePullUp(); this.$emit("onPullUp","当前状态:上拉加载"); } }); this.scroll.on('pullingDown',()=> { this.beforePullDown(); this.$emit("onPullDown","当前状态:下拉加载更多"); }); }
父组件在使用时,需要传入配置参数Props以及处理子组件发射的事件,并且用具体的内容并替换掉 slot 标签
{{v.title}}
导演:{{filterDirectors(v.directors)}}
年份:{{v.year}}{{v.stock}}
类别:{{v.genres.join(" / ")}}
评分:{{v.rating.average}}分
父组件可以通过this.$refs.xxx来获取到子组件,可以调用子组件里面的方法;
computed:{ scrollElement(){ return this.$refs.scroll } }
完整的scroller组件内容如下
0" :loadingWord="beforePullUpWord">
到此,相信大家对“vue.js怎么实现拉加载以及下拉刷新功能”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
当前题目:vue.js怎么实现拉加载以及下拉刷新功能
标题网址:http://myzitong.com/article/psoopg.html