效果

chrome模拟器

真机

布局

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]，即高度都是它们本身的高度。

这时，滚动条是和最高的页（第三页）对应的。事实上，天猫的就是这样做的。这里因为切换时没有异步加载数据，本屌就没在切换后重新设定高度。

• 触摸事件在这里的作用是演示滑动可能产生的效果，最终决定哪一页是当前页的是滑动事件。

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事件，参见.

avalon.mobile对移动端的处理是：

1. touchstart->touchmove->touchend

2. 如果touchmove的距离不够(过短)，触发模拟出来的tap事件.具体的

   半天没松开=>longtab(长按事件)

规定事件内又触发tap事件=>doubletap(双击事件)

其他=>tap

1. 如果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

---