说在开头

最近移动端做了一个手指左右滑动切换内容的效果demo;

为了表示我的无私，决定分享给诸位；（详细代码见附件）

正文

先上html代码

<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><metaname="viewport"content="width=device-width"/><title></title><linkrel="stylesheet"type="text/css"href="main.css"><scripttype="text/javascript"></script></head><body><divclass="j-cont"><divclass="title">穿衣助理</div><divclass="m-shape"><divclass="cont"><ulclass="f-cb"></ul></div><divclass="but_cont"><spanclass="but">完成</span></div></div></div></body><scripttype="text/javascript"src="zepto.min.js"></script><scripttype="text/javascript"src="main.js"></script></html>

整个页面ul部分是需要切换的部分具体内容有js拼接而成


css代码如下：（这里直接贴上了less编译之后）

body,div,ul{margin:0px;padding:0px;}.m-shape{box-sizing:border-box;}.m-shape.cont{overflow:hidden;box-sizing:border-box;}.j-cont{margin:0auto;width:100%;}.m-shape.contul{width:1000%;position:relative;margin:07%;overflow:hidden;}.m-shape.contulli{display:inline-block;float:left;width:8%;padding:00.3%;overflow:hidden;box-sizing:content-box;}.m-shape.contulli.tishi{position:absolute;border-radius:50%;background:url(../p_w_picpaths/Assist_icon.png)no-repeat;background-size:30px30px;width:30px;height:30px;right:10px;top:10px;}.m-shape.contulli.title{height:40px;line-height:40px;text-align:center;}.m-shape.contulli.cont{height:77%;text-align:center;}.m-shape.contulli.cont.img{height:100%;text-align:center;}.m-shape.contulli.cont.imgimg{height:100%;min-height:100%;max-height:100%;}.m-shape.contulli.contp{text-align:center;line-height:40px;}.m-shape.contulli.msg{position:absolute;top:100%;left:10%;background:rgba(0,0,0,0.5);color:#fff;line-height:30px;padding:10px;width:80%;border-radius:4px;}.m-shape.contulli.j-conts_item{background:#9DE0FF;border-radius:6px;position:relative;}.m-shape.but_cont{text-align:center;padding:20px0;}.m-shape.but_cont.but{background:#e9494b;display:inline-block;height:30px;line-height:30px;width:30%;border-radius:15px;color:#fff;}.title{text-align:center;height:40px;line-height:40px;}

上面代码有一个地方要说明一下：

j-cont的大小为保证自适应其大小与手机屏幕一致（通过js实现，详情见后面js）

而后ul的width设置为1000%；即屏幕宽度的10倍；

li的关键css如下：

width:8%;padding:00.3%;overflow:hidden;box-sizing:content-box;

所以其padding+width = 86%的j-cont，即屏幕宽度的86%；

在执行滚动时我也是词义移动86%；但是存在一问题如下:

第一张图片左边没有图片；但是必须预留这个位置，不然第一张位置这样的，后面切换也会有错位：


所以给ul设置marin:0% 7%;保证首次位置正确，后面每次切换位置也正确。


为了保证所以尺寸的智能设备自由伸缩，写了一个方法初始化容器的大小：

//初始化容器varhtml_cont_initialization=function(){//初始化容器$(".j-cont").css({"height":$(window).height()+"px","min-height":$(window).height()+"px"});//初始化内容容器$(".j-conts_item").css({"height":$(window).height()-110+"px","min-height":$(window).height()-110+"px","max-height":$(window).height()-110+"px"});}

其中110px为头部title,以及按钮所在行即：$(".title"),$(".but_cont")高度之和。


还有一段代码，用来load内容模板（这个地方，现在是假数据）

varsex_initialization=function(){varhtml="";for(vari=0;i<5;i++){html+='<liclass="f-cbj-conts">\<divclass="j-conts_item"><iclass="tishi"></i>\<divclass="title">您的体型是？'+i+'</div>\<divclass="cont">\<divclass="img"><imgsrc="p_w_picpaths/Assist_woman_'+i+'.png"/></div>\<p>A型</p>\</div>\</div></li>';}$(".m-shapeul").append(html);html_cont_initialization();}

滑动代码如下：

//触屏左右切换体型效果functionswitchShape(){varstartX,startY,endX,endY;varisMove=false;//触摸：start,end操作之间是否有movevarisSwitching=false;//是否正在执行动画varcurIndex=0;varMaxLi=$(".m-shapeulli").length-1;$("body").on("touchmove",".m-shapeul",touchMoveHandler);$("body").on("touchstart",".m-shapeul",touchStartHandler);$("body").on("touchend",".m-shapeul",touchEndHandler);//触屏左右切换体型效果functiontouchStartHandler(event){event.preventDefault();vartouch=event.touches[0];startY=touch.pageY;startX=touch.pageX;}functiontouchMoveHandler(event){event.preventDefault();vartouch=event.touches[0];endX=touch.pageX;isMove=true;}functiontouchEndHandler(event){event.preventDefault();if(!isMove||isSwitching){return;}varw=86;varcurLeft=curIndex?-curIndex*w:0;vardirX=1;//滑动方向if(Math.abs(startX-endX)>50){//滑动间距大于50if(startX-endX>0){if(curIndex===MaxLi){//当前是最后一个return;}curIndex++;}else{if(0===curIndex){//当前是第一个return;}dirX=-1;curIndex--;}}moveTo($(this),"left",curLeft,-curIndex*w,43,dirX);isMove=false;}//动画函数//params:对象，css属性，开始，结束，50ms移动距离,方向1←，-1右functionmoveTo($obj,objProp,start,end,spacing,direction){vartemp=start;isSwitching=true;varmoveTimer=setInterval(function(){if((1===direction&&temp-end<=0)||(-1===direction&&temp-end>=0)){clearInterval(moveTimer);isSwitching=false;return;}temp=temp-spacing*direction;$obj.css(objProp,temp+"%");},200);}}switchShape();

上面代码有3点需要注意：

每次滑动应包括三个动作touch start,move,end缺一不可；因为触屏点击也会触发start,end;

新增isMove状态，每次move为true;end后为false；保证三个动作都触发才执行滑动。

具体滑动的距离，一般来讲30-50直接都可以；

如果当前正在执行动画，那么在此滑动时，其实应该忽略；即滑动动画执行完毕后，再执行下一次。


说在最后

本人移动端玩的少，所以考虑难免不周，多多指教！