说在开头
最近移动端做了一个手指左右滑动切换内容的效果demo;
为了表示我的无私，决定分享给诸位；(详细代码见附件)
正文
先上html代码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
html+='
\\您的体型是？'+i+'\\\
A型
\\';
}
$(".m-shapeul").append(html);
html_cont_initialization();
}
滑动代码如下：//触屏左右切换体型效果
functionswitchShape(){
varstartX,startY,endX,endY;
varisMove=false;//触摸：start,end操作之间是否有move
varisSwitching=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){//滑动间距大于50
if(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直接都可以；
如果当前正在执行动画，那么在此滑动时，其实应该忽略；即滑动动画执行完毕后，再执行下一次。
说在最后
本人移动端玩的少，所以考虑难免不周，多多指教！
如果觉得《手机版html页面左右滑动切换页面 移动端手指左右滑动切换内容demo》对你有帮助，请点赞、收藏，并留下你的观点哦！
