移动端的人机交互方式与PC端发生了本质的变化。在PC端使用鼠标和键盘进行交互，而在移动端则使用手指。触摸并滑动。在PC端开发时，主要监听鼠标事件，如mouseEnter（鼠标进入事件）、mouseMove（鼠标移动事件）、mouseLeave（鼠标离开事件）。在移动端，监听事件有触摸开始事件、触摸移动事件和触摸结束事件。在这个设计中，商品详情页使用tab来切换显示基本信息、商品详情和评论信息。在基本信息中，通过滑动效果展示商品大图，通过手指滑动控制幻灯片的展示。移动端手势操作效果图：实现方式是监听手势的开始事件，记录手指在屏幕上的开始位置。监听手势的移动事件，获取移动手指的坐标，将移动手指的坐标减去起始位置的坐标，得到手指移动的距离。然后实时改变幻灯片的变换值，实现幻灯片移动的效果。最后需要监听手势的结束事件，在事件处理函数中获取手指的最终位置，同样用最终位置减去手指初始位置得到手指移动的最终距离，以及判断手指最终移动距离是否大于滑动距离Critical值，本设计将这里的critical值设置为100px，如果大于critical值则滑动切换，否则不切换。在切换的特殊情况下，幻灯片在第一张幻灯片上向左滑动，最后一张幻灯片向右滑动。这两个操作都是无效的，因为没有第一张幻灯片的左侧和第二张幻灯片的右侧。图片。如何友好地告诉用户他们几乎滑动到了第一页或最后一页，是提升用户体验的关键。本次设计借鉴了各大主流电商平台的主流做法，即在无效滑动的情况下降低幻灯片的滑动速度，让用户知道它几乎无法移动。这种做法既保持了操作的一致性，因为不存在用户操作的直接无响应，又明确告诉用户，用户已经滑到最后了。在PC端开发过程中，使用绝对定位改变top和left的值来移动元素。在第一次尝试使用绝对定位时，当手指滑动改变元素的top和left值时，元素左右晃动。因为移动端对CSS3和HTML5的支持非常好，所以在移动端的开发过程中可以放心的使用CSS3中的transform样式。它的style值包括translate3d（三个方向的移动）、transformX（水平移动）、transformY（垂直移动）、scale（2d缩放变换）、rotate（定义2d旋转）等，这里translate3d是用来改变位置的的元素。transform和绝对定位在性能上的区别在于浏览器会在样式改变时触发重构和重绘。改变绝对定位的left和top值先触发重构再触发重绘，而只有通过transform触发浏览器重绘。因此，transform的使用提高了浏览器的处理效率，具有更好的性能。在实际表现中，transform也可以完美解决问题。HTML结构是：div.piclist-outerdiv.piclist-innereachsingleBigingmainImgsimg(src='#{singleBig}'alt='slideimg')div.piclist-signal-wrapperul.piclist-signaleachsingleBigin因为gmainImgsli用的是Jade，所以是上面的格式。最外层的div是整个滑动区域，类名.piclist-inner的div包裹着几张图片，横向并列。类名为.piclist-signal-wrapper，将当前显示的图片的标志进行包装。再来看具体的js代码：//@beginfingerjsvarslidewrap=document.getElementsByClassName("piclist-outer")[0]varslideInner=document.getElementsByClassName("piclist-inner")[0]varpage=0vardistanceX=0vartransX=0varlistUl=document.getElementsByClassName("piclist-signal")[0].getElementsByTagName("li")varlistUlLen=listUl.length//触摸启动事件处理函数handlestart(e){if(e.touches.length!==1){return}//获取touch的横纵坐标startX=e.touches[0].pageXstartY=e.touches[0].pageYslidewrap.addEventListener('touchmove',handlemove,false)//console.log("sxis:"+startX+"syis:"+startY)}//触摸移动事件处理函数handlemove(e){transX=-page*screenWidth//console.log("page:"+(-page*screenWidth))slideInner.style.transform="translate3d("+transX+"px,0,0)"vartouches=e.touchesif(touches&&touches.length){distanceX=startX-touches[0].pageX//console.log("distanceX:"+distanceX)//控制台。log("handlemove"+transX)//如果是第一张幻灯片或者最后一张幻灯片，滑动速度会降低到原来的三分之一，到时提示用户不要滑动if((page==0&&distanceX<0)||(page==(listUlLen-1)&&distanceX>0)){distanceX=distanceX/3}//通过改变transform属性的值来实现效果移动vartransX=-distanceX-page*screenWidthslideInner.style.transform="translate3d("+transX+"px,0,0)"}e.preventDefault()}//触摸结束事件处理函数handleend(argument){transX=-page*screenWidth-distanceXvarmove_time=1varmove_dis=8//console.log("moveend")//如果是第一张幻灯片向左滑动或者最后一张幻灯片向右滑动，在当幻灯片结束时，原始幻灯片不会改变if((page==0&&distanceX<0)||(page==(listUlLen-1)&&distanceX>0)){transX=-page*screenWidthslideInner.风格。transform="translate3d("+transX+"px,0,0)"return}//如果滑动距离大于100px，则向右切换滑动if(distanceX>=100){listUl[page].style.background="#e0e0e0"page++listUl[page].style.background="#c40000"//通过定时器实现滑动动画效果vartimer=setInterval(function(){slideInner.style.transform="translate3d("+transX+"px,0,0)"transX-=move_dis//console.log("transX:"+transX)//控制台。log("page:"+-page*(screenWidth+1))if(transX<=-page*(screenWidth+1)){clearInterval(timer)}},move_time)}//如果滑动距离小于100px，然后Switchslideleftelseif(distanceX<=-100){listUl[page].style.background="#e0e0e0"page--listUl[page].style.background="#c40000"vartimer=setInterval(function(){slideInner.style.transform="translate3d("+transX+"px,0,0)"transX+=move_dis//console.log("transX:"+transX)//console.log("page:"+-page*(screenWidth+1))if(transX>=-page*(screenWidth+1)){clearInterval(timer)}},move_time)}//如果滑动距离没有达到临界距离，不切换其他{transX=-page*screenWidthslideInner.style.transform="translate3d("+transX+"px,0,0)"}}查看完整项目，可以到我的GitHub。欢迎下载、提问、关注。
