最近项目要求增加一个下拉刷新的功能,自己也试着写了一个,单总是有点卡顿。 于是学习了下别人的插件(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:{},
//...
}
}