說在開頭

最近移動端做了一個手指左右滑動切換內容的效果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:?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(../p_w_picpaths/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%；但是存在一問題如下:

第一張圖片左邊沒有圖片；但是必須預留這個位置，不然第一張位置這樣的，后面切換也會有錯位：

所以給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?

html?+=?'

\\您的體型是？'+?i?+?'\\\

A型

\\';

}

$(".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)?{

event.preventDefault();

var?touch?=?event.touches[0];

startY?=?touch.pageY;

startX?=?touch.pageX;

}

function?touchMoveHandler(event)?{

event.preventDefault();

var?touch?=?event.touches[0];

endX?=?touch.pageX;

isMove?=?true;

}

function?touchEndHandler(event)?{

event.preventDefault();

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直接都可以；

如果當前正在執行動畫，那么在此滑動時，其實應該忽略；即滑動動畫執行完畢后，再執行下一次。

說在最后

本人移動端玩的少，所以考慮難免不周，多多指教！

總結

以上是生活随笔為你收集整理的手机版html页面左右滑动切换页面,移动端手指左右滑动切换内容demo的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。