国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

avalon js單頁面滑動切換

zhisheng / 3202人閱讀

摘要：觸摸事件在這里的作用是演示滑動可能產生的效果，最終決定哪一頁是當前頁的是滑動事件。在這里觸摸事件移動的距離達到一定值時前面事件回調已經過濾了不符合要求的事件，就會觸發滑動事件。

效果

chrome模擬器

真機
http://v.youku.com/v_show/id_XMTM2MjExNTM5Ng==.html

布局 tab部分 

    
    
        
  • TAB 1
    • 
        ...
    

    


@page_num:3;//頁面數
@page_width:360px;//每一頁的寬度

#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，每個切換卡的寬度用百分比,(100-頁面數*2*切換卡padding)/頁面數*100%.

游標#cursor用absolute,相對于整個tab定位，left也用百分比表示，后面滑動時動態改變left.其寬度=(100/頁面數)%.

內容部分 

    
    
        
  • 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相對于"遮罩"，通過改變它的transform調整后面內容的可見部分。

觸摸事件 

    

        
    
            
  • 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,//當前頁
    heights:[],
    offset:0,//頁面偏移
    cursor_pos:0,//tab游標偏移
    ...
});

需要對每一頁設定高度：當前頁的高度是它自己本身的高度，其它頁的高度不能大于當前頁的高度，防止滾動條與當前頁不對應。
比如當前頁是第一頁（最左邊），高度為[500,700,800]，即高度都是它們本身的高度。


這時，滾動條是和最高的頁（第三頁）對應的。
事實上，天貓的h5商品詳情頁面就是這樣做的。
這里因為切換時沒有異步加載數據，本屌就沒在切換后重新設定高度。

觸摸事件在這里的作用是演示滑動可能產生的效果，最終決定哪一頁是當前頁的是滑動事件。

touchstart 
  • page {{$index+1}}
    • ...
start:function(e){
    start=e.touches[0].clientX;
}
...

    start保存觸摸的初始點。

    touchmove 
  • page {{$index+1}}
    • ...
move:function(e){
    offset=e.touches[0].clientX-start;//當前觸摸的位置到初始點的位移
    slide_switch.offset=page_width*slide_switch.cur-offset;//更新頁面可見區域
    //更新tab游標位置
    slide_switch.cursor_pos=cursor_step*slide_switch.cur-offset/(page_width*page_num)*100;
}
...
    touchend 
  • 
page {{$index+1}}
    • ...
end:function(e){
    //頁面當前狀態是第一頁的左邊或最后一頁的右邊或左右相鄰頁未露出一半
    if(slide_switch.offset<0||slide_switch.offset>page_width*(page_num-1)||
    Math.abs(offset)
滑動事件

    關于移動端的click事件，參見也來說說touch事件與點擊穿透問題.
    avalon.mobile對移動端的處理是：
    


    touchstart->touchmove->touchend
    

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


    規定事件內又觸發tap事件=>doubletap(雙擊事件)
       其他=>tap
    

    如果touchmove達到一定距離，觸發swipe(滑動)事件。
    

    在這里觸摸事件移動的距離達到一定值時(前面touchend事件回調已經過濾了不符合要求的事件)，就會觸發滑動事件。總的執行順序: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點擊

    ...

      
    
    • 
    TAB {{$index+1}}
      • 

    
...
    
定制

    less
    

    @page_num:3;
@page_width:320px;
    

    js
    

    page_width=320,page_num=3
    


    下載

    文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

    轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/91533.html

    相關文章

    • avalon 單頁面程序 （種子工程）之二 按需加載和路由系統

      摘要：的成功離開不這三個東西，分層架構，路由系統，儲存系統。分層架構是我們組織復雜代碼的關鍵，路由系統是將多個頁面壓縮在一個頁面的關鍵。在這個種子工程中，我都調用了同一個方法，就比較適合目錄動態生成，需要按需調用不同的頁面的情況。 SPA的成功離開不這三個東西，分層架構，路由系統，儲存系統。分層架構是我們組織復雜代碼的關鍵，路由系統是將多個頁面壓縮在一個頁面的關鍵。 其中avalon路由用到...

      fanux 評論0 收藏0

    • avalon 單頁面程序 （種子工程）之一 用requirejs引入avalon

      摘要：現在微軟終于痛定思痛決定放棄了不支持的安全更新，對我們前端來說，真的是重大利好啊言歸正傳，這篇文章的目的就是把怎么用構建一個單頁面程序介紹以下，是對自己的一個總結，也喜歡對大家有一定的借鑒作用，寫的不好不對的地方希望大家多評論評論謝謝。 這篇文章是寫在公司項目結束之后的，因為我個人不太會把沒有實踐過的東西寫出來，實踐是檢驗真理的唯一標準么，用的怎么樣，好不好用，在成熟實踐過的項目上能體...

      solocoder 評論0 收藏0

    • avalon2初體驗

      摘要：最近因項目進展需求對現有項目進行重構，由于目前項目還未實現真正意義上的前后端分離后續會循序重構實現，在時間緊產品循序迭代的情況下，想一次性實現前后端分離精力實在有限主要是前端開發人力不足。 最近因項目進展需求對現有項目進行重構，由于目前項目還未實現真正意義上的前后端分離（后續會循序重構實現），在時間緊產品循序迭代的情況下，想一次性實現前后端分離精力實在有限（主要是前端開發人力不足）。所...

      youkede 評論0 收藏0

    • 讓webpack2兼容IE8以下代碼

      摘要：可用編譯低版本代碼水有多深不得而知啟動新技術提供測試框架進行單元測試，代碼覆蓋率報告，可與和快速對接。頁面的其他資源文件，通過引入單元測試項目啟動環境配置為了把保證項目正常運行，請自行更新相關環境。 項目地址：https://github.com/sayll/ie-webpack-start ie-webpack-start showImg(https://segmentfault....

      StonePanda 評論0 收藏0

    • avalon 項目實踐記錄

      摘要：業務組件模塊化拆分復用后整體可維護性也得到了很大提升。先贊一個當然凡事都有相對的一面，此篇文字就主要記錄自己在項目過程中的一些問題。 原文地址：http://mtmzorro.github.io/201... 項目背景 需要兼容到IE7（根據數據支撐重要說服拋棄IE6） 上個版本傳統 jQuery DOM 開發模式，經過無數手維護已經慘不忍睹 核心業務流程，可維護性、健壯性要求高 主...

      yvonne 評論0 收藏0

    發表評論

    0條評論

    最新活動
    閱讀需要支付1元查看
    <