avalon js单页面滑动切换

zhisheng 发布于2019-08-22 10:58 / 3200人阅读

摘要：触摸事件在这里的作用是演示滑动可能产生的效果，最终决定哪一页是当前页的是滑动事件。在这里触摸事件移动的距离达到一定值时前面事件回调已经过滤了不符合要求的事件，就会触发滑动事件。

效果

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

下载

GPU云服务器云服务器 html5滑动切换页面 js页面向上滑动 js 实现页面滑动滑动切换

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91533.html

avalon 单页面程序（种子工程）之二按需加载和路由系统

摘要：的成功离开不这三个东西，分层架构，路由系统，储存系统。分层架构是我们组织复杂代码的关键，路由系统是将多个页面压缩在一个页面的关键。在这个种子工程中，我都调用了同一个方法，就比较适合目录动态生成，需要按需调用不同的页面的情况。 SPA的成功离开不这三个东西，分层架构，路由系统，储存系统。分层架构是我们组织复杂代码的关键，路由系统是将多个页面压缩在一个页面的关键。其中avalon路由用到...

fanux 2019-08-19 17:30 评论0 收藏0
avalon 单页面程序（种子工程）之一用requirejs引入avalon

摘要：现在微软终于痛定思痛决定放弃了不支持的安全更新，对我们前端来说，真的是重大利好啊言归正传，这篇文章的目的就是把怎么用构建一个单页面程序介绍以下，是对自己的一个总结，也喜欢对大家有一定的借鉴作用，写的不好不对的地方希望大家多评论评论谢谢。这篇文章是写在公司项目结束之后的，因为我个人不太会把没有实践过的东西写出来，实践是检验真理的唯一标准么，用的怎么样，好不好用，在成熟实践过的项目上能体...

solocoder 2019-08-19 17:27 评论0 收藏0
avalon2初体验

摘要：最近因项目进展需求对现有项目进行重构，由于目前项目还未实现真正意义上的前后端分离后续会循序重构实现，在时间紧产品循序迭代的情况下，想一次性实现前后端分离精力实在有限主要是前端开发人力不足。最近因项目进展需求对现有项目进行重构，由于目前项目还未实现真正意义上的前后端分离（后续会循序重构实现），在时间紧产品循序迭代的情况下，想一次性实现前后端分离精力实在有限（主要是前端开发人力不足）。所...

youkede 2019-08-01 15:51 评论0 收藏0
让webpack2兼容IE8以下代码

摘要：可用编译低版本代码水有多深不得而知启动新技术提供测试框架进行单元测试，代码覆盖率报告，可与和快速对接。页面的其他资源文件，通过引入单元测试项目启动环境配置为了把保证项目正常运行，请自行更新相关环境。项目地址：https://github.com/sayll/ie-webpack-start ie-webpack-start showImg(https://segmentfault....

StonePanda 2019-08-21 11:31 评论0 收藏0
avalon 项目实践记录

摘要：业务组件模块化拆分复用后整体可维护性也得到了很大提升。先赞一个当然凡事都有相对的一面，此篇文字就主要记录自己在项目过程中的一些问题。原文地址：http://mtmzorro.github.io/201... 项目背景需要兼容到IE7（根据数据支撑重要说服抛弃IE6）上个版本传统 jQuery DOM 开发模式，经过无数手维护已经惨不忍睹核心业务流程，可维护性、健壮性要求高主...

yvonne 2019-08-20 17:35 评论0 收藏0