最近项目要求增加下拉刷新的功能，自己也试着写了一个，但是列表总是有点卡。于是学习了别人的插件（ps：既然写不出好的插件，只好向别人学习了）：官网github地址：https://github.com/mescroll/m...1.整体预发布架构；(function(name,definition){//检测上下文是AMD还是CMD})('MeScroll',function(){//滚动逻辑代码//构造函数varMeScroll=function(){//初始化drop-downRefreshme.initDownScroll();//初始化上拉加载，然后初始化me.initUpScroll();//自动加载}/*配置参数：下拉刷新*/MeScroll.prototype.extendDownScroll=function(){}/*配置参数：上拉加载*/MeScroll.prototype.extendUpScroll=function(){}/*配置参数*/MeScroll.extend=function(){}/*--------初始化上拉-向下刷新-------*/MeScroll.prototype.initDownScroll=function(){}/*--------初始化上拉加载------*/MeScroll.prototype.initUpScroll=function(){}//...其他函数挂在原型函数上，用于初始化时调用或暴露给客户端定义；})2.检查环境；(function(name,definition){//判断上下文是AMD还是CMDvarhasDefine=typeofdefine==='function',//判断上下文是不是NodehasExports=typeofmodule!=='undefined'&&module.exports;if(hasDefine){//AMD环境或CMD环境define(definition);}elseif(hasExports){//定义为一个普通的Node模块module.exports=definition();}else{//将模块的执行结果挂在window变量中，在浏览器中this指向window对象this[name]=definition();}})('MeScroll',function(){//scroll的逻辑代码})3.检查设备变量u=navigator.userAgent;varisIOS=!!u.match(/\(i[^;]+;(U;)?CPU.+MacOSX/);//是否是ios设备varisPC=typeofwindow.orientation=='undefined';//是否是PC端varisAndroid=u.indexOf('Android')>-1||u.indexOf('Adr')>-1;;//是否是android4.对象合并方法/*配置参数*/MeScroll.extend=function(userOption,defaultOption){if(!userOption)returndefaultOption;for(varkeyindefaultOption){if(userOption[key]==null){userOption[key]=defaultOption[key];}elseif(typeofuserOption[key]=="object"){MeScroll.extend(userOption[key],defaultOption[key]);//深度匹配}}returnuserOption;}5.获取手指的坐标/*根据点击和滑动事件获取第一根手指的坐标*/MeScroll.prototype.getPoint=function(e){return{x:e.touches？e.touches[0].pageX：e.clientX，y：e.touches？e.touches[0].pageY:e.clientY}}6.判断是上拉还是下拉varmoveY=curPoint.y-me.startPoint.y;//与起点相比，移动距离大于0往下拉，小于0往上拉7.滚动条相关的一些方法/*滚动条的位置*/MeScroll.prototype.getScrollTop=function(){if(this.isScrollBody){返回document.documentElement.scrollTop||文档.body.scrollTop;}else{返回this.scrollDom.scrollTop;}}/*滚动条到底部的距离：滚动内容的高度-滚动容器的高度-滚动条顶部的高度*/MeScroll.prototype.getToBottom=function(){returnthis.getScrollHeight()-this.getClientHeight()-这个。getScrollTop();}/*设置滚动条的位置*/MeScroll.prototype.setScrollTop=function(y){if(this.isScrollBody){document.documentElement.scrollTop=y;document.body.scrollTop=y;}else{this.scrollDom.scrollTop=y;}}8。初始化下拉刷新//1.配置参数me.optDown=me.options.down||{};//具体参数配置me.extendDownScroll(me.optDown);//2.鼠标或手指按下事件me.touchstartEvent=function(){}me.scrollDom.addEventListener("mousedown",me.touchstartEvent);//PC鼠标事件me.scrollDom.addEventListener("touchstart",me.touchstartEvent);//移动手指事件//3.鼠标或手指滑动事件me.touchmoveEvent=function(){}me.scrollDom.addEventListener("touchmove",me.touchmoveEvent);//移动手指事件//4.鼠标或手指离开事件me.touchendEvent=function(){}me.scrollDom.addEventListener("mouseup",me//移动端手指事件me.scrollDom.addEventListener("touchcancel",me.touchendEvent);//移动端systemstopstrackingtouch//5.页面添加下拉布局9.初始化上拉加载//1.配置参数//2.滚动监听me.scrollEvent=function(){}if(me.isScrollBody){window.addEventListener("scroll",me.scrollEvent);}else{me.scrollDom.addEventListener("scroll",me.scrollEvent);}10.css相关/*开启硬件加速：使动画渲染流畅，解决部分手机闪白屏问题，触发下拉刷新上拉加载时开启，结束后移除，避免其他兼容滥用引起的问题*/.mescroll-hardware{-webkit-transform:translateZ(0);-webkit-transform-style:preserve-3d;-webkit-backface-visibility：隐藏；-webkit-perspective:1000;}11.注册为vue插件具体注册插件方法可以参考vue插件文档：https://cn.vuejs.org/v2/guide...MeScroll.install=function(Vue,options){Vue.component('MeScroll',{template:'',data:,props:,mounted:,methods:{},//...}}
