移动端商品详情页涉及多个内容切换问题。这里，采用了标签设计的方式，标签设计是各大主流电商平台采用的主要形式，比如淘宝、京东等。简单的tab实现起来还是比较容易的，只需要监听optionbutton，控制对应的内容显示还是隐藏即可。如果单纯的显示和隐藏，对用户体验是不利的。因此，将简单的显示和隐藏改为滑动效果，需要满足以下条件才能实现滑动效果：1、所有的tab都应该包含在同一个元素中，通过改变位置来实现滑动效果父元素的效果；2、由于每个tab的高度不一致，所以滑动结束后要实时动态改变父元素的高度。Tab实现效果图：实现的思路是构造一个基本函数来实现父元素的移动，传入的参数包括移动的方向和移动的距离。在这个设计中，tab有3个选项，所以有两个移动方向和两个移动距离，分别是滑动一屏和滑动两屏的长度。同样，为了兼容不同的设备，相对Unit，一个屏幕的宽度等于10rem。然后构造第二个函数，根据当前tab的id和要显示的tab的id，在条件语句中执行相应的滑动函数。除了这两个功能外，还需要添加相关的监听事件来判断起始位置和目标位置。首先通过HTML代码看一下页面的结构：//页面的header包含三个按钮div.headerspan#header-info.header-关注基本信息span#header-更多商品详情span#header-commentEvaluation1734//页面中间部分包含三个具体的section，每次只显示一个section//tab的作用是通过页眉按钮与中间内容进行交互div.middle-outerdiv.middle//基本信息模块div.infodiv.piclist-outerdiv.piclist-innereachsingleBigingmainImgsimg(src='#{singleBig}'alt='slideimg')//商品详情模块div.morespanproductimagediv.more-wrappereachsingDetailImgingdetailImgsimg(src="#{singDetailImg}"alt="")//商品评论模块div.commentdiv.comment-keywordspan.keywords-selectedallspanadded(569)span有图片(453)span鞋子不错(452)span做工一般(12)span很舒服(659)//页面底部div.footerdiv.footer-iconlista(href='javascript:;').footer-iconlist-linkspan.glyphicon.glyphicon-userspan.footer-iconList-txt客服a(href='javascript:;').footer-iconlist-linkspan.glyphicon.glyphicon-star-emptyspan.footer-iconList-txtcollectiona(href='/mshopcart').footer-iconlist-linkspan.glyphicon.glyphicon-shopping-cartspan.footer-iconList-txt购物车div#footer-btnsa(href='javascript:;').footer-btn.footer-btn-addToCart添加到购物车a(href='javascript:;').footer-btn.footer-btn-buyNow立即购买div.maskerspan.masker-text成功添加到购物车span.masker-标志span.glyphicon.glyphicon-ok具体的JS代码是：//两个关键函数，slide和move，slide决定移动的方向和距离，move负责具体的移动//在这个函数中使用switch语句判断可以使用更简洁的代码，直接调用函数move，传入dis值，需要简单调整move函数的实现//调用函数movefunctionslide(nowPosId,nextPosId){//得到当前点击的headbutton的id值和之前选中的headbutton的id值//两者相减得到差值vardis=nextPosId-nowPosId//根据不同的差值使用switch语句执行不同的调用switch(dis){case1://向左滑动10rem//如果差值为1，则向左滑动一屏距离move(-1,screenWidth)breakcase-1://向右滑动10rem//如果差值为-1，则向右滑动一屏距离move(1,screenWidth)breakcase2://slidetoleft20rem//如果差值为2，则向左滑动两屏距离move(-1,2*screenWidth)breakcase-2://向右滑动20rem//如果相差为-2，则向右滑动两屏一段距离move(1,2*screenWidth)break}}//执行移动特定元素的函数，direc表示方向，-1表示向左滑动，1表示向右滑动functionmove(direc,move_lenth){//用于记录移动的距离，当移动距离到达参数varmove_dis=0//定时器的执行间隔varmove_time=20//获取父元素的left值varnow_css_left=parseInt($('.middle').css('left'))//开始执行定时器，用一个作用于函数的变量来保存定时器对象vartimer=setInterval(function(){//计算得到一个执行的left值，当direc有正负信息时可以判断移动方向now_css_left+=direc*setpmove//计算累计移动距离move_dis+=setpmove//设置父元素的left值$('.middle').css('left',now_css_left+'px')//移动完成后，根据点击的按钮设置父元素的高度if(Math.abs(move_dis-move_lenth)<0.001){clearInterval(timer)switch(focus_id){case(1):$('.middle').css('left','0rem').css("height",infoH)$(".middle-outer").css("height",infoH)console.log($(".middle-outer").css("height"))breakcase(2):$('.middle').css('left','-10rem').css("height",moreH)$(".middle-outer").css("height",moreH)console.log($(".middle-outer").css("height"))breakcase(3):$('.middle').css('left','-20rem').css("height",commentH)$(".middle-outer").css("height",commentH)console.log($(".middle-outer").css("height"))breakdefault:break}//设置页面置顶，因为子元素高度不统一window.scrollTo(0,0)}},移动时间)//endtimer}//endfuncmove//点击监听事件//点击header标题“基本信息”的监听事件$('#header-info').click(function(){//header_focus_item变量保存的titleofthefocusedtabbuttonthistime,//如果此时点击了显示tab本身的按钮，则不执行任何操作if(header_focus_item==$(this).attr('id')){return}//clickbtn变量保存的点击按钮序号，“基本信息”为1，“商品详情”为2，“评价”为3clickbtn=1//调用滑动函数，传入的值是当前标签id和目标idslide(focus_id,clickbtn)focus_id=1//改变这个按钮的样式，让用户清楚的知道此时正在查看的是哪个标签$(this).addClass('header-focus')//改变之前选中的tab对应按钮的样式使其成为普通的tab按钮$("#"+header_focus_item).removeClass('header-focus')header_focus_item='header-info'})//点击头部“商品详情”的监听事件，执行的操作类似于点击“基本信息”$('#header-more').click(function(){if(header_focus_item==$(this).attr('id')){return}clickbtn=2slide(focus_id,clickbtn)focus_id=2$(this).addClass('header-focus')$("#"+header_focus_item).removeClass('header-focus')header_focus_item='header-more'})//点击表头“评论”的监听事件，执行的操作与点击“基本信息”类似。$('#header-comment').click(function(){if(header_focus_item==$(this).attr('id')){return}clickbtn=3slide(focus_id,clickbtn)focus_id=3$(this).addClass('header-focus')$("#"+header_focus_item).removeClass('header-focus')header_focus_item='header-comment'})查看完整项目，可以前往我的GitHub，欢迎大家下载、提问和关注
