下拉重新整理，上拉載入外掛mescroll原始碼分析

小魚er發表於2019-02-16
原始碼

最近專案要求增加一個下拉重新整理的功能，自己也試著寫了一個，單總是有點卡頓。 於是學習了下別人的外掛（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:{},
        //...
    }
}

相關文章