說(shuō)在開(kāi)頭

最近移動(dòng)端做了一個(gè)手指左右滑動(dòng)切換內(nèi)容的效果demo;

為了表示我的無(wú)私，決定分享給諸位；(詳細(xì)代碼見(jiàn)附件)

正文

先上html代碼html>

穿衣助理

完成

整個(gè)頁(yè)面ul部分是需要切換的部分具體內(nèi)容有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;

}

上面代碼有一個(gè)地方要說(shuō)明一下：

j-cont的大小為保證自適應(yīng)其大小與手機(jī)屏幕一致(通過(guò)js實(shí)現(xiàn)，詳情見(jiàn)后面js)

而后ul的width設(shè)置為1000%；即屏幕寬度的10倍；

li的關(guān)鍵css如下：width:?8%;

padding:?0?0.3%;

overflow:?hidden;

box-sizing:?content-box;

所以其padding+width = 86%的j-cont，即屏幕寬度的86%；

在執(zhí)行滾動(dòng)時(shí)我也是詞義移動(dòng)86%；但是存在一問(wèn)題如下:

第一張圖片左邊沒(méi)有圖片；但是必須預(yù)留這個(gè)位置，不然第一張位置這樣的，后面切換也會(huì)有錯(cuò)位：

所以給ul設(shè)置marin:0% 7%;保證首次位置正確，后面每次切換位置也正確。

為了保證所以尺寸的智能設(shè)備自由伸縮，寫了一個(gè)方法初始化容器的大小：//初始化容器

var?html_cont_initialization?=?function?()?{

//初始化容器

$(".j-cont").css({

"height":?$(window).height()?+?"px",

"min-height":?$(window).height()?+?"px"

});

//初始化內(nèi)容容器

$(".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")高度之和。

還有一段代碼，用來(lái)load內(nèi)容模板(這個(gè)地方，現(xiàn)在是假數(shù)據(jù))var?sex_initialization?=?function?()?{

var?html?=?"";

for?(var?i?=?0;?i?

html?+=?'

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

A型

\\';

}

$(".m-shape?ul").append(html);

html_cont_initialization();

}

滑動(dòng)代碼如下：//觸屏左右切換體型效果

function?switchShape()?{

var?startX,?startY,?endX,?endY;

var?isMove?=?false;//觸摸：start,end操作之間是否有move

var?isSwitching?=?false;//是否正在執(zhí)行動(dòng)畫

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;//滑動(dòng)方向

if?(Math.abs(startX?-?endX)?>?50)?{//滑動(dòng)間距大于50

if?(startX?-?endX?>?0)?{

if?(curIndex?===?MaxLi)?{//當(dāng)前是最后一個(gè)

return;

}

curIndex++;

}?else?{

if?(0?===?curIndex)?{//當(dāng)前是第一個(gè)

return;

}

dirX?=?-1;

curIndex--;

}

}

moveTo($(this),?"left",?curLeft,?-curIndex?*?w,?43,?dirX);

isMove?=?false;

}

//動(dòng)畫函數(shù)

//params:對(duì)象，css屬性，開(kāi)始，結(jié)束，50ms移動(dòng)距離,方向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點(diǎn)需要注意：每次滑動(dòng)應(yīng)包括三個(gè)動(dòng)作touch start,move,end缺一不可；因?yàn)橛|屏點(diǎn)擊也會(huì)觸發(fā)start,end;

新增isMove狀態(tài)，每次move為true;end后為false；保證三個(gè)動(dòng)作都觸發(fā)才執(zhí)行滑動(dòng)。

具體滑動(dòng)的距離，一般來(lái)講30-50直接都可以；

如果當(dāng)前正在執(zhí)行動(dòng)畫，那么在此滑動(dòng)時(shí)，其實(shí)應(yīng)該忽略；即滑動(dòng)動(dòng)畫執(zhí)行完畢后，再執(zhí)行下一次。

說(shuō)在最后

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。