下拉刷新，上拉加載插件mescroll源碼分析

ztyzz 發(fā)布于2019-08-02 11:03 / 1733人閱讀

摘要：最近項(xiàng)目要求增加一個(gè)下拉刷新的功能，自己也試著寫了一個(gè)，單總是有點(diǎn)卡頓。

最近項(xiàng)目要求增加一個(gè)下拉刷新的功能，自己也試著寫了一個(gè)，單總是有點(diǎn)卡頓。于是學(xué)習(xí)了下別人的插件（ps : 既然寫不出好插件，就要會(huì)學(xué)習(xí)別人的）：

官網(wǎng)github地址：https://github.com/mescroll/m...

1.整體預(yù)發(fā)結(jié)構(gòu)

;(function(name, definition) {
// 檢測上下文環(huán)境是否為AMD或CMD
    
})("MeScroll", function() {//scroll的邏輯代碼
    
    //構(gòu)造函數(shù)
    var MeScroll = function(){
        //初始化下拉刷新
        me.initDownScroll();
        //初始化上拉加載,則初始化
        me.initUpScroll();

        //自動(dòng)加載
    }
    
    
    /*配置參數(shù):下拉刷新*/
    MeScroll.prototype.extendDownScroll = function(){}
    
    /*配置參數(shù):上拉加載*/
    MeScroll.prototype.extendUpScroll = function(){}
    
    /*配置參數(shù)*/
    MeScroll.extend = function(){}
    
    /*-------初始化下拉刷新-------*/
    MeScroll.prototype.initDownScroll = function(){}
    
    /*-------初始化上拉加載-------*/
    MeScroll.prototype.initUpScroll = function(){}
    
    
    
    //...其他函數(shù)掛在prototype的函數(shù),用于初始化時(shí)候調(diào)用或者暴露給客戶端定義；
    
    
    
}）

2. 檢查環(huán)境

;(function(name, definition) {
// 檢測上下文環(huán)境是否為AMD或CMD
    var hasDefine = typeof define === "function",
    // 檢查上下文環(huán)境是否為Node
        hasExports = typeof module !== "undefined" && module.exports;

    if(hasDefine) {
        // AMD環(huán)境或CMD環(huán)境
        define(definition);
    } else if(hasExports) {
        // 定義為普通Node模塊
        module.exports = definition();
    } else {
        // 將模塊的執(zhí)行結(jié)果掛在window變量中，在瀏覽器中this指向window對象
        this[name] = definition();
    }
})("MeScroll", function() {//scroll的邏輯代碼}）

3.檢查設(shè)備

var u = navigator.userAgent;
        var isIOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //是否為ios設(shè)備
        var isPC = typeof window.orientation == "undefined"; //是否為PC端
        var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1;; //是否為android端

4.對象合并方法

/*配置參數(shù)*/
    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.獲取手指的坐標(biāo)

/*根據(jù)點(diǎn)擊滑動(dòng)事件獲取第一個(gè)手指的坐標(biāo)*/
    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; //和起點(diǎn)比,移動(dòng)的距離,大于0向下拉,小于0向上拉

7.和滾動(dòng)條有關(guān)的一些的方法

/*滾動(dòng)條的位置*/
    MeScroll.prototype.getScrollTop = function() {
        if(this.isScrollBody) {
            return document.documentElement.scrollTop || document.body.scrollTop;
        } else {
            return this.scrollDom.scrollTop;
        }
    }

    /*滾動(dòng)條到底部的距離：滾動(dòng)內(nèi)容的高度 - 滾動(dòng)容器的高度 - 滾動(dòng)條頂部的高度*/
    MeScroll.prototype.getToBottom = function() {
        return this.getScrollHeight() - this.getClientHeight() - this.getScrollTop();
    }

    /*設(shè)置滾動(dòng)條的位置*/
    MeScroll.prototype.setScrollTop = function(y) {
        if(this.isScrollBody) {
            document.documentElement.scrollTop = y;
            document.body.scrollTop = y;
        } else {
            this.scrollDom.scrollTop = y;
        }
    }

8.初始化下拉刷新

//1.配置參數(shù)
me.optDown = me.options.down || {};
//具體參數(shù)配置
me.extendDownScroll(me.optDown);
//2.鼠標(biāo)或手指的按下事件
me.touchstartEvent = function(){}
me.scrollDom.addEventListener("mousedown", me.touchstartEvent); //PC端鼠標(biāo)事件
me.scrollDom.addEventListener("touchstart", me.touchstartEvent); //移動(dòng)端手指事件
        
//3.鼠標(biāo)或手指的滑動(dòng)事件
me.touchmoveEvent = function(){}
me.scrollDom.addEventListener("touchmove", me.touchmoveEvent); //移動(dòng)端手指事件

//4.鼠標(biāo)或手指的離開事件
me.touchendEvent = function(){}
me.scrollDom.addEventListener("mouseup", me.touchendEvent); //PC端鼠標(biāo)抬起事件
me.scrollDom.addEventListener("mouseleave", me.touchendEvent); //PC端鼠標(biāo)離開事件
me.scrollDom.addEventListener("touchend", me.touchendEvent); //移動(dòng)端手指事件
me.scrollDom.addEventListener("touchcancel", me.touchendEvent); //移動(dòng)端系統(tǒng)停止跟蹤觸摸

//5.在頁面中加入下拉布局

9.初始化上拉加載

//1.配置參數(shù)

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

10.css相關(guān)

/*啟用硬件加速:使動(dòng)畫渲染流暢,解決部分手機(jī)閃白屏問題,在下拉刷新和上拉加載觸發(fā)時(shí)啟用,結(jié)束后移除,避免濫用導(dǎo)致其他兼容性問題*/
.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:{},
        //...
    }
}