avalon js單頁(yè)面滑動(dòng)切換

zhisheng 發(fā)布于2019-08-22 10:58 / 3194人閱讀

摘要：觸摸事件在這里的作用是演示滑動(dòng)可能產(chǎn)生的效果，最終決定哪一頁(yè)是當(dāng)前頁(yè)的是滑動(dòng)事件。在這里觸摸事件移動(dòng)的距離達(dá)到一定值時(shí)前面事件回調(diào)已經(jīng)過濾了不符合要求的事件，就會(huì)觸發(fā)滑動(dòng)事件。

效果

chrome模擬器

真機(jī)
http://v.youku.com/v_show/id_XMTM2MjExNTM5Ng==.html

布局 tab部分


    
        TAB 1
        ...

@page_num:3;//頁(yè)面數(shù)
@page_width:360px;//每一頁(yè)的寬度

#tab{
    position: relative;
    ul{
        display: flex;
        align-items: flex-start;
        flex-flow: row wrap;
        justify-content: space-around;
    }
    li{
        display: block;
        width:(100-8*@page_num)/@page_num*1%;
        text-align: center;
        color: #333;
        padding:10px 4%;
        font-size: 1.5em;
    }
    .cur{
        color:#bc232c;
    }
    #cursor{
        bottom:0;
        width:1/@page_num*100%;
        position: absolute;
        border-bottom:5px solid #bc232c;
        color: #bc232c;
    }
}

切換卡用flex-box，每個(gè)切換卡的寬度用百分比,(100-頁(yè)面數(shù)*2*切換卡padding)/頁(yè)面數(shù)*100%.

游標(biāo)#cursor用absolute,相對(duì)于整個(gè)tab定位，left也用百分比表示，后面滑動(dòng)時(shí)動(dòng)態(tài)改變left.其寬度=(100/頁(yè)面數(shù))%.

內(nèi)容部分


    
        page 1
        ...

#content{
    width: @page_width*@page_num;
    li{
        font-size: 30px;
        vertical-align: top;
        width: 1/@page_num*100%;
        display: inline-block;
    }
}

#content ul相對(duì)于"遮罩"，通過改變它的transform調(diào)整后面內(nèi)容的可見部分。

觸摸事件


    
        
            TAB {{$index+1}}
        
        
    
    
        
            
                page {{$index+1}}

var start,offset,page_width=320,page_num=3,cursor_step=1/page_num*100;
var slide_switch=avalon.define({
    $id:"slide_switch",
    cur:0,//當(dāng)前頁(yè)
    heights:[],
    offset:0,//頁(yè)面偏移
    cursor_pos:0,//tab游標(biāo)偏移
    ...
});

需要對(duì)每一頁(yè)設(shè)定高度：當(dāng)前頁(yè)的高度是它自己本身的高度，其它頁(yè)的高度不能大于當(dāng)前頁(yè)的高度，防止?jié)L動(dòng)條與當(dāng)前頁(yè)不對(duì)應(yīng)。
比如當(dāng)前頁(yè)是第一頁(yè)（最左邊），高度為[500,700,800]，即高度都是它們本身的高度。

這時(shí)，滾動(dòng)條是和最高的頁(yè)（第三頁(yè)）對(duì)應(yīng)的。
事實(shí)上，天貓的h5商品詳情頁(yè)面就是這樣做的。
這里因?yàn)榍袚Q時(shí)沒有異步加載數(shù)據(jù)，本屌就沒在切換后重新設(shè)定高度。

觸摸事件在這里的作用是演示滑動(dòng)可能產(chǎn)生的效果，最終決定哪一頁(yè)是當(dāng)前頁(yè)的是滑動(dòng)事件。

touchstart

page {{$index+1}}

...
start:function(e){
    start=e.touches[0].clientX;
}
...

start保存觸摸的初始點(diǎn)。

touchmove

page {{$index+1}}

...
move:function(e){
    offset=e.touches[0].clientX-start;//當(dāng)前觸摸的位置到初始點(diǎn)的位移
    slide_switch.offset=page_width*slide_switch.cur-offset;//更新頁(yè)面可見區(qū)域
    //更新tab游標(biāo)位置
    slide_switch.cursor_pos=cursor_step*slide_switch.cur-offset/(page_width*page_num)*100;
}
...

touchend


page {{$index+1}}

...
end:function(e){
    //頁(yè)面當(dāng)前狀態(tài)是第一頁(yè)的左邊或最后一頁(yè)的右邊或左右相鄰頁(yè)未露出一半
    if(slide_switch.offset<0||slide_switch.offset>page_width*(page_num-1)||
    Math.abs(offset)
滑動(dòng)事件
關(guān)于移動(dòng)端的click事件，參見也來說說touch事件與點(diǎn)擊穿透問題.
avalon.mobile對(duì)移動(dòng)端的處理是：

touchstart->touchmove->touchend

如果touchmove的距離不夠(過短)，觸發(fā)模擬出來的tap事件.具體的
   半天沒松開=>longtab(長(zhǎng)按事件)


規(guī)定事件內(nèi)又觸發(fā)tap事件=>doubletap(雙擊事件)
   其他=>tap
如果touchmove達(dá)到一定距離，觸發(fā)swipe(滑動(dòng))事件。

在這里觸摸事件移動(dòng)的距離達(dá)到一定值時(shí)(前面touchend事件回調(diào)已經(jīng)過濾了不符合要求的事件)，就會(huì)觸發(fā)滑動(dòng)事件。總的執(zhí)行順序:touchstart->touchmove->touchend->swipe.
page {{$index+1}}
...
turn:function(cur){
    slide_switch.cur=cur;
    slide_switch.offset=page_width*slide_switch.cur;
    slide_switch.cursor_pos=cursor_step*slide_switch.cur;
}
...
tab點(diǎn)擊
...

    
    TAB {{$index+1}}

...
定制
less
@page_num:3;
@page_width:320px;
js
page_width=320,page_num=3

下載