有時(shí)候我們?cè)谝粋€(gè)list中要為列表項(xiàng)添加左右滑動(dòng)的效果茫经，通過(guò)滑動(dòng)出來(lái)的按鈕實(shí)現(xiàn)一些點(diǎn)擊事件薇组，這時(shí)候就可以用到本文所介紹的插件了肿仑。
照例序目，先上效果圖：
我覺得這個(gè)效果還是挺高頻且實(shí)用的，奈何weui里面沒(méi)有這個(gè)擴(kuò)展楞卡，只能自己在網(wǎng)上搜索并改進(jìn)了霜运。為了方便使用脾歇，我已經(jīng)把左右滑動(dòng)效果封裝成了一個(gè)jquery插件了，讀者也可以根據(jù)需要修改其代碼做更多的擴(kuò)展淘捡。
1藕各、列表項(xiàng)html
先貼一下列表項(xiàng)的html代碼：
<a href="#" class="weui-media-box weui-media-box_appmsg swipte_item">
<div class="weui-media-box__hd">
<img class="weui-media-box__thumb" src="thumbnail.png">
</div>
<div class="weui-media-box__bd">
<h4 class="weui-media-box__title"></h4>
<p class="weui-media-box__desc"></p>
</div>
<li class="weui-swiped-btn weui-swiped-btn_warn swipe_btn">拒接</li>
<li class="weui-swiped-btn accept_btn">接單</li>
</a>
其中，兩個(gè)li標(biāo)簽的class屬性可以自定義焦除，后續(xù)生成滑動(dòng)實(shí)例要用到激况，還有，我用的是weui膘魄，寫出來(lái)是如上的效果乌逐，讀者最好根據(jù)需求自行制作控件。
2创葡、列表項(xiàng)css
隨后是css代碼：
.weui-swiped-btn.weui-swiped-btn_warn.swipe_btn {
color: white;
position: absolute;
right: -67px;
width: 35px;
text-align: center;
height: 70px;
line-height: 70px;
}
.weui-swiped-btn.accept_btn {
color: white;
background: #1AAD19;
position: absolute;
left: -67px;
width: 35px;
text-align: center;
height: 70px;
line-height: 70px;
}
讀者根據(jù)自己的需求修改就好了浙踢，這里面有個(gè)問(wèn)題，就是left灿渴、right的偏移和width不一樣洛波，我暫時(shí)沒(méi)找出問(wèn)題根源，只能在插件里通過(guò)增加滑動(dòng)偏移來(lái)抵消掉負(fù)偏移骚露，不知道哪位大神能指導(dǎo)一下蹬挤。
3、滑動(dòng)插件js代碼
借鑒前人代碼基礎(chǔ)上棘幸，已經(jīng)封裝成了JQuery代碼焰扳，能實(shí)現(xiàn)左右雙向的滑動(dòng)：
/* *
* @brief 列表項(xiàng)左滑右滑功能創(chuàng)建
* 使用方法：$('.itemWipe').touchWipe({itemBtn: '.item-button'});
* @param itemWipe 條目樣式名
* itemBtn 滑動(dòng)后出現(xiàn)的按鈕樣式名(左右按鈕大小應(yīng)一致，傳入任一個(gè)即可)
* @return 帶滑動(dòng)效果的列表項(xiàng)
* */
(function ($) {
$.fn.touchWipe = function (option) {
var defaults = {
itemBtn: '.item-delete', //刪除元素
};
var opts = $.extend({}, defaults, option); //配置選項(xiàng)
var btnWidth = $(opts.itemBtn).width() + 32; //此處有文章中說(shuō)的問(wèn)題误续，望指導(dǎo)
var initX; //觸摸位置X
var initY; //觸摸位置Y
var moveX; //滑動(dòng)時(shí)的位置X
var moveY; //滑動(dòng)時(shí)的位置Y
var X = 0; //移動(dòng)距離X
var Y = 0; //移動(dòng)距離Y
var flagX = 0; //是否是左右滑動(dòng) 0為初始吨悍，1為左右，2為上下女嘲，在move中設(shè)置畜份，在end中歸零
var objX = 0; //目標(biāo)對(duì)象位置
$(this).on('touchstart', function (event) {
//console.log('start..');
var obj = this;
initX = event.targetTouches[0].pageX;
initY = event.targetTouches[0].pageY;
//console.log(initX + ':' + initY);
objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1;
//console.log(objX);
if (objX == 0) {
$(this).on('touchmove', function (event) {
// 判斷滑動(dòng)方向，X軸阻止默認(rèn)事件欣尼，Y軸跳出使用瀏覽器默認(rèn)
if (flagX == 0) {
setScrollX(event);
return;
} else if (flagX == 1) {
event.preventDefault();
} else {
return;
}
var obj = this;
moveX = event.targetTouches[0].pageX;
X = moveX - initX;
if (X >= 0) {
var l = Math.abs(X);
obj.style.WebkitTransform = "translateX(" + l + "px)";
if (l > btnWidth) {
l = btnWidth;
obj.style.WebkitTransform = "translateX(" + l + "px)";
}
} else if (X < 0) {
var l = Math.abs(X);
obj.style.WebkitTransform = "translateX(" + -l + "px)";
if (l > btnWidth) {
l = btnWidth;
obj.style.WebkitTransform = "translateX(" + -l + "px)";
}
}
});
} else if (objX < 0) {
$(this).on('touchmove', function (event) {
// 判斷滑動(dòng)方向，X軸阻止默認(rèn)事件停蕉，Y軸跳出使用瀏覽器默認(rèn)
if (flagX == 0) {
setScrollX(event);
return;
} else if (flagX == 1) {
event.preventDefault();
} else {
return;
}
var obj = this;
moveX = event.targetTouches[0].pageX;
X = moveX - initX;
if (X >= 0) {
var r = -btnWidth + Math.abs(X);
obj.style.WebkitTransform = "translateX(" + r + "px)";
if (r > 0) {
r = 0;
obj.style.WebkitTransform = "translateX(" + r + "px)";
}
} else { //向左滑動(dòng)
obj.style.WebkitTransform = "translateX(" + -btnWidth + "px)";
}
});
} else {
$(this).on('touchmove', function (event) {
// 判斷滑動(dòng)方向愕鼓，X軸阻止默認(rèn)事件，Y軸跳出使用瀏覽器默認(rèn)
if (flagX == 0) {
setScrollX(event);
return;
} else if (flagX == 1) {
event.preventDefault();
} else {
return;
}
var obj = this;
moveX = event.targetTouches[0].pageX;
X = moveX - initX;
if (X <= 0) {
var r = btnWidth + Math.abs(X);
obj.style.WebkitTransform = "translateX(" + r + "px)";
if (r > 0) {
r = 0;
obj.style.WebkitTransform = "translateX(" + r + "px)";
}
} else { //向右滑動(dòng)
obj.style.WebkitTransform = "translateX(" + btnWidth + "px)";
}
});
}
})
//結(jié)束時(shí)判斷慧起，并自動(dòng)滑動(dòng)到底或返回
$(this).on('touchend', function (event) {
var obj = this;
objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1;
if (objX > -btnWidth / 2 && objX <= 0) {
obj.style.transition = "all 0.2s";
obj.style.WebkitTransform = "translateX(" + 0 + "px)";
obj.style.transition = "all 0";
objX = 0;
} else if (objX > btnWidth / 2) {
obj.style.transition = "all 0.2s";
obj.style.WebkitTransform = "translateX(" + btnWidth + "px)";
obj.style.transition = "all 0";
} else if (objX < btnWidth / 2 && objX > 0) {
obj.style.transition = "all 0.2s";
obj.style.WebkitTransform = "translateX(" + 0 + "px)";
obj.style.transition = "all 0";
objX = 0;
} else {
obj.style.transition = "all 0.2s";
obj.style.WebkitTransform = "translateX(" + -btnWidth + "px)";
obj.style.transition = "all 0";
objX = -btnWidth;
}
flagX = 0;
})
//設(shè)置滑動(dòng)方向
function setScrollX(event) {
moveX = event.targetTouches[0].pageX;
moveY = event.targetTouches[0].pageY;
X = moveX - initX;
Y = moveY - initY;
if (Math.abs(X) > Math.abs(Y)) {
flagX = 1;
} else {
flagX = 2;
}
return flagX;
}
//鏈?zhǔn)椒祷? return this;
};
})(jQuery);
接下來(lái)菇晃，我會(huì)其中關(guān)鍵的地方和思路解釋清楚，具體內(nèi)容就需要讀者自己理解了：
1蚓挤、獲得首次點(diǎn)擊時(shí)的像素點(diǎn)(x,y)坐標(biāo)值磺送，并通過(guò)WebkitTransform獲得當(dāng)前列表項(xiàng)偏移的像素（objX等于0說(shuō)明沒(méi)有偏移驻子，大于0說(shuō)明向右偏移了，小于0說(shuō)明向左偏移了）估灿。
2崇呵、touchmove事件觸發(fā)后，獲得當(dāng)前的手指點(diǎn)住的像素點(diǎn)(x,y)坐標(biāo)馅袁，通過(guò)與初始坐標(biāo)相減域慷，獲得手指滑動(dòng)的方向（變量X大于0是右滑，小于0是左滑）汗销。
3犹褒、隨后，判斷當(dāng)前x軸的偏移量弛针，當(dāng)超過(guò)按鈕一半是自動(dòng)滑動(dòng)到底叠骑，小于一半是返回。
4削茁、最后宙枷，在你的js代碼中，通過(guò)$('.itemWipe').touchWipe({itemBtn: '.item-button'});即可為指定html標(biāo)簽綁定此功能付材。
以上朦拖。
github傳送地址：https://github.com/JunJieDing666/YouZhiGou
若有錯(cuò)誤煩請(qǐng)指出，有地方不理解歡迎討論厌衔。
