摘要：最近項目要求增加一個下拉刷新的功能，自己也試著寫了一個，單總是有點卡頓。

最近項目要求增加一個下拉刷新的功能，自己也試著寫了一個，單總是有點卡頓。 于是學習了下別人的插件（ps : 既然寫不出好插件，就要會學習別人的）：

官網github地址：https://github.com/mescroll/m...

;(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的函數,用于初始化時候調用或者暴露給客戶端定義；
    
    
    
}）

;(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的邏輯代碼}）

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端

/*配置參數*/
    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;
    }

/*根據點擊滑動事件獲取第一個手指的坐標*/
    MeScroll.prototype.getPoint = function(e) {
        return {
            x: e.touches ? e.touches[0].pageX : e.clientX,
            y: e.touches ? e.touches[0].pageY : e.clientY
        }
    }

var moveY = curPoint.y - me.startPoint.y; //和起點比,移動的距離,大于0向下拉,小于0向上拉

/*滾動條的位置*/
    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;
        }
    }

//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.在頁面中加入下拉布局

//1.配置參數

//2.滾動監聽
me.scrollEvent = function() {}
if(me.isScrollBody) {
    window.addEventListener("scroll", me.scrollEvent);
} else {
    me.scrollDom.addEventListener("scroll", me.scrollEvent);
}

/*啟用硬件加速:使動畫渲染流暢,解決部分手機閃白屏問題,在下拉刷新和上拉加載觸發時啟用,結束后移除,避免濫用導致其他兼容性問題*/
.mescroll-hardware {
    -webkit-transform: translateZ(0);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}

具體注冊插件方法可以參考vue插件文檔：
https://cn.vuejs.org/v2/guide...

MeScroll.install = function(Vue,options){
    Vue.component("MeScroll",{
        template:"",
        data: ,
        props: ,
        mounted: ,
        methods:{},
        //...
    }
}