移動(dòng)端觸摸滑動(dòng)縱向圖片滾動(dòng)小插件~

ernest.wang 發(fā)布于2019-08-01 15:44 / 1684人閱讀

摘要：老規(guī)矩上，過過癮先縱向圖片滾動(dòng)不過這個(gè)需要你在手機(jī)中查看啦再上源碼縱向滾動(dòng)圖片很簡(jiǎn)單，左側(cè)有個(gè)縱向的圖片數(shù)量以及當(dāng)前圖片索引的展示，然后整個(gè)是一個(gè)縱向可觸摸滑動(dòng)的列表，可以自定義滑動(dòng)回調(diào)函數(shù)。

老規(guī)矩~ 上DEMO，過過癮先：縱向圖片滾動(dòng)（不過這個(gè)demo需要你在手機(jī)中查看啦~）

再上源碼：縱向滾動(dòng)圖片

DEMO很簡(jiǎn)單，左側(cè)有個(gè)縱向的圖片數(shù)量以及當(dāng)前圖片索引的展示，然后整個(gè)是一個(gè)縱向可觸摸滑動(dòng)的列表，可以自定義滑動(dòng)回調(diào)函數(shù)。

一. 先說原理

首先圖片肯定是縱向排列的了

就像下邊這張圖一樣

灰色方塊就是一堆縱向排列的圖片

紅色方框中的是顯示區(qū)域，溢出隱藏

然后在動(dòng)態(tài)改變方框內(nèi)部的div的top值來切換顯示在方框中的不同圖片~

二. 碼代碼

首先初始化容器高度，以及添加縱向的控制條

    LONG_DISTANCE = nelsonVS.minHeight / 2;
    for(var i = 0 ; i < nelsonVS.lis.length ; i++){
        nelsonVS.lis[i].style.height = nelsonVS.minHeight + "px";
    }
    nelsonVS.ul.style.height = nelsonVS.num * nelsonVS.minHeight + "px";
    var prograssBarDom = document.createElement("ul");
    prograssBarDom.className = "prograssBar";
    var fragment = document.createDocumentFragment();
    for(var i = 0,linode = "" ; i < nelsonVS.num ; i ++){
        linode = document.createElement("li");
        linode.className = "prograssBarItem" + (i==0?" active":"");
        fragment.appendChild(linode);
    }
    prograssBarDom.appendChild(fragment);
       nelsonVS.dom.appendChild(prograssBarDom);
       nelsonVS.prograssBar = prograssBarDom.children;
       prograssBarDom = null;fragment = null;
       this.slide();
       return this;
   }

然后，綁定滾動(dòng)的事件

綁定touchstart記錄手指開始觸摸的位置

綁定touchmove實(shí)時(shí)更新手指觸摸點(diǎn)位于屏幕的位置，并使圖片容器隨著手指滾動(dòng)

綁定touchend更新手指離開時(shí)候的位置，并根據(jù)位置來判斷是是將圖片歸位不進(jìn)行滾動(dòng)，還是滾動(dòng)到下一張/上一張圖片（觸發(fā)臨界值可自行設(shè)定）

var STARTY,ENDY,EVENT_TYPE,START_POS,that = this,TIMESTAMP,TIMESTAMP_END;
    nelsonVS.dom.addEventListener("touchstart",function(e){
        e.preventDefault();
        TIMESTAMP = (new Date()).valueOf();
        START_POS = nelsonVS.ul.offsetTop;
        STARTY = e.touches[0].clientY;
        if(that.moveInterval){
            clearInterval(that.moveInterval);
        }
    })
    nelsonVS.dom.addEventListener("touchmove",function(e){
        e.preventDefault();
        ENDY = e.targetTouches[0].clientY;
        nelsonVS.ul.style.top = START_POS + ENDY - STARTY + "px";
    })
    nelsonVS.dom.addEventListener("touchend",function(e){
        e.preventDefault();
        TIMESTAMP_END = (new Date()).valueOf();
        var DIS = ENDY - STARTY;
        if(DIS > DISTANCE){
            EVENT_TYPE = "DOWN";
        }else if(DIS < -DISTANCE){
            EVENT_TYPE = "UP";
        }
        if(Math.abs(DIS) > DISTANCE){
            if(TIMESTAMP_END - TIMESTAMP < SENSIBILITY){
                that.checkAction(EVENT_TYPE);
            }else{
                if(Math.abs(DIS) > LONG_DISTANCE){
                    that.checkAction(EVENT_TYPE);
                }else{
                    that.action(EVENT_TYPE);
                }
            }
        }else{
            that.action();
        }
    })

檢測(cè)滑動(dòng)方向以及臨界值判斷

if((et == "UP" && (nelsonVS.index - 1) <= -nelsonVS.num) || (et == "DOWN" && (nelsonVS.index + 1) > 0)){
    this.action();
        return;
    }
    switch(et){
        case "UP":
            nelsonVS.isSliding = true;
            nelsonVS.index--;
            this.action(et);
            break;
        case "DOWN":
            nelsonVS.index++;
            nelsonVS.isSliding = true;
            this.action(et);
            break;
        default:
            this.action();
    }
}

進(jìn)行滾動(dòng)處理

var AIM_POS = nelsonVS.minHeight * nelsonVS.index;
var DIS = AIM_POS - nelsonVS.ul.offsetTop;        var speed = (DIS) / 3;
var that = this;
that.moveInterval = setInterval(function(){
    nelsonVS.ul.style.top = nelsonVS.ul.offsetTop + speed + "px";
    if(Math.abs(AIM_POS - nelsonVS.ul.offsetTop) < speed || Math.abs(speed) <= 0.5){
        nelsonVS.ul.style.top = AIM_POS + "px";
        speed = (DIS) / 3;
        if(et){
            var para = {};
            para.index = -nelsonVS.index;
            para.item = nelsonVS.lis[para.index];
            if(that.onSlideCallBack){
                that.onSlideCallBack(para);
                if(that.onSlideUpCallBack||that.onSlideDownCallBack){
                    console.error("在設(shè)置滾動(dòng)回調(diào)的時(shí)候不可同時(shí)設(shè)置單向滾動(dòng)回調(diào)")
                }
            }else{
                if(that.onSlideUpCallBack && et == "UP"){
                    that.onSlideUpCallBack(para);
                }
                if(that.onSlideDownCallBack && et == "DOWN"){
                    that.onSlideDownCallBack(para);
                }
            }
        }
        that.changePrograssBar();
        clearInterval(that.moveInterval);
        nelsonVS.isSliding = false;
    }else{
        speed = (AIM_POS - nelsonVS.ul.offsetTop) / 5;
    }
},10)

更新控制條的當(dāng)前索引值位置

for(var i = 0 ; i < nelsonVS.prograssBar.length ; i++){
    if(nelsonVS.prograssBar[i].classList.contains("active")){
                nelsonVS.prograssBar[i].classList.remove("active");
        break;
    }
}
nelsonVS.prograssBar[-nelsonVS.index].classList.add("active");

其他就是一些回調(diào)函數(shù)啦~