近来项目请求增添一个下拉革新的功用，本身也试着写了一个，单总是有点卡顿。 因而进修了下他人的插件（ps : 既然写不出好插件，就要会进修他人的）：
官网github地点：https://github.com/mescroll/m…
1.团体预发组织
;(function(name, definition) {
// 检测上下文环境是不是为AMD或CMD
})('MeScroll', function() {//scroll的逻辑代码
//组织函数
var MeScroll = function(){
//初始化下拉革新
me.initDownScroll();
//初始化上拉加载,则初始化
me.initUpScroll();
//自动加载
}
/*设置参数:下拉革新*/
MeScroll.prototype.extendDownScroll = function(){}
/*设置参数:上拉加载*/
MeScroll.prototype.extendUpScroll = function(){}
/*设置参数*/
MeScroll.extend = function(){}
/*-------初始化下拉革新-------*/
MeScroll.prototype.initDownScroll = function(){}
/*-------初始化上拉加载-------*/
MeScroll.prototype.initUpScroll = function(){}
//...其他函数挂在prototype的函数,用于初始化时刻挪用或许暴露给客户端定义；
}）2. 搜检环境
;(function(name, definition) {
// 检测上下文环境是不是为AMD或CMD
var hasDefine = typeof define === 'function',
// 搜检上下文环境是不是为Node
hasExports = typeof module !== 'undefined' && module.exports;
if(hasDefine) {
// AMD环境或CMD环境
define(definition);
} else if(hasExports) {
// 定义为一般Node模块
module.exports = definition();
} else {
// 将模块的实行效果挂在window变量中，在浏览器中this指向window对象
this[name] = definition();
}
})('MeScroll', function() {//scroll的逻辑代码}）3.搜检装备
var u = navigator.userAgent;
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //是不是为ios装备
var isPC = typeof window.orientation == 'undefined'; //是不是为PC端
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;; //是不是为android端4.对象兼并要领
/*设置参数*/
MeScroll.extend = function(userOption, defaultOption) {
if(!userOption) return defaultOption;
for(var key in defaultOption) {
if(userOption[key] == null) {
userOption[key] = defaultOption[key];
} else if(typeof userOption[key] == "object") {
MeScroll.extend(userOption[key], defaultOption[key]); //深度婚配
}
}
return userOption;
}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.推断向上拉照样向下拉
var moveY = curPoint.y - me.startPoint.y; //和出发点比,挪动的间隔,大于0向下拉,小于0向上拉
7.和转动条有关的一些的要领
/*转动条的位置*/
MeScroll.prototype.getScrollTop = function() {
if(this.isScrollBody) {
return document.documentElement.scrollTop || document.body.scrollTop;
} else {
return this.scrollDom.scrollTop;
}
}
/*转动条到底部的间隔：转动内容的高度 - 转动容器的高度 - 转动条顶部的高度*/
MeScroll.prototype.getToBottom = function() {
return this.getScrollHeight() - this.getClientHeight() - this.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.touchendEvent); //PC端鼠标抬起事宜
me.scrollDom.addEventListener("mouseleave", me.touchendEvent); //PC端鼠标脱离事宜
me.scrollDom.addEventListener("touchend", me.touchendEvent); //挪动端手指事宜
me.scrollDom.addEventListener("touchcancel", me.touchendEvent); //挪动端体系住手跟踪触摸
//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: hidden;
-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:{},
//...
}
}
