標籤：移動端手指左右滑動切換內容demo
說在開頭
最近移動端做了一個手指左右滑動切換內容的效果demo;
為了表示我的無私，決定分享給諸位；（詳細代碼見附件）
本文
先上html代碼
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width = device-width" /> <title></title> <link rel="stylesheet" type="text/css" href="main.css"> <script type="text/javascript"> </script></head><body> <div class="j-cont"> <div class="title">穿衣助理</div> <div class="m-shape"> <div class="cont"> <ul class="f-cb"></ul> </div> <div class="but_cont"> <span class="but">完成</span> </div> </div> </div></body><script type="text/javascript" src="zepto.min.js"></script><script type="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: 0 auto; width: 100%;}.m-shape .cont ul { width: 1000%; position: relative; margin: 0 7%; overflow: hidden;}.m-shape .cont ul li { display: inline-block; float: left; width: 8%; padding: 0 0.3%; overflow: hidden; box-sizing: content-box;}.m-shape .cont ul li .tishi { position: absolute; border-radius: 50%; background: url(../images/Assist_icon.png) no-repeat; background-size: 30px 30px; width: 30px; height: 30px; right: 10px; top: 10px;}.m-shape .cont ul li .title { height: 40px; line-height: 40px; text-align: center;}.m-shape .cont ul li .cont { height: 77%; text-align: center;}.m-shape .cont ul li .cont .img { height: 100%; text-align: center;}.m-shape .cont ul li .cont .img img { height: 100%; min-height: 100%; max-height: 100%;}.m-shape .cont ul li .cont p { text-align: center; line-height: 40px;}.m-shape .cont ul li .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 .cont ul li .j-conts_item { background: #9DE0FF; border-radius: 6px; position: relative;}.m-shape .but_cont { text-align: center; padding: 20px 0;}.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: 0 0.3%; overflow: hidden; box-sizing: content-box;
所以其padding+width = 86%的j-cont，即螢幕寬度的86%；
在執行滾動時我也是詞義移動86%；但是存在一問題如下:
650) this.width=650;" src="http://s1.51cto.com/wyfs02/M00/75/E2/wKiom1ZELrzQvC_QAACc5ethWaQ772.png" style="float:none;" title="Image 1.png" alt="wKiom1ZELrzQvC_QAACc5ethWaQ772.png" />650) this.width=650;" src="http://s4.51cto.com/wyfs02/M02/75/E0/wKioL1ZELwiil9DlAACmUS30Vy4759.png" title="Image 3.png" style="float:none;" alt="wKioL1ZELwiil9DlAACmUS30Vy4759.png" />
第一張圖片左邊沒有圖片；但是必須預留這個位置，不然第一張位置這樣的，後面切換也會有錯位：
650) this.width=650;" src="http://s2.51cto.com/wyfs02/M00/75/E2/wKiom1ZEL3jC4BlVAACnnvCUa-8914.png" title="Image 4.png" alt="wKiom1ZEL3jC4BlVAACnnvCUa-8914.png" />
所以給ul設定marin:0% 7%;保證首次位置正確，後面每次切換位置也正確。
為了保證所以尺寸的智慧型裝置自由伸縮，寫了一個方法初始化容器的大小：
//初始化容器 var html_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內容範本（這個地方，現在是假資料）
var sex_initialization = function () { var html = ""; for (var i = 0; i < 5; i++) { html += ‘<li class="f-cb j-conts"> <div class="j-conts_item"><i class="tishi"></i> <div class="title">您的體型是？‘+ i + ‘</div> <div class="cont"> <div class="img"><img src="images/Assist_woman_‘ + i + ‘.png" /></div> <p>A型</p> </div> </div></li>‘; } $(".m-shape ul").append(html); html_cont_initialization(); }
滑動代碼如下：
//觸屏左右切換體型效果 function switchShape() { var startX, startY, endX, endY; var isMove = false;//觸摸：start,end操作之間是否有move var isSwitching = false;//是否正在執行動畫 var curIndex = 0; var MaxLi = $(".m-shape ul li").length - 1; $("body").on("touchmove", ".m-shape ul", touchMoveHandler); $("body").on("touchstart", ".m-shape ul", touchStartHandler); $("body").on("touchend", ".m-shape ul", touchEndHandler); //觸屏左右切換體型效果 function touchStartHandler(event) { var touch = event.touches[0]; startY = touch.pageY; startX = touch.pageX; } function touchMoveHandler(event) { var touch = event.touches[0]; endX = touch.pageX; isMove = true; } function touchEndHandler(event) { if (!isMove || isSwitching) { return; } var w = 86; var curLeft = curIndex ? -curIndex * w : 0; var dirX = 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右 function moveTo($obj, objProp, start, end, spacing, direction) { var temp = start; isSwitching = true; var moveTimer = 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直接都可以；
如果當前正在執行動畫，那麼在此滑動時，其實應該忽略；即滑動動畫執行完畢後，再執行下一次。
說在最後本人移動端玩的少，所以考慮難免不周，多多指教！
移動端手指左右滑動切換內容demo
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
