根据网络上的做了一些封装,优化。原理都一样。
var param={
movMax: 120,
movChangeTriger: 30,
getCurrentTouchItem:function(e){ //滑动块绑定的数据项
},
refreshTouchList:function(e) {//刷新方法
},
};
function touchStart (e) { //记录起点
var currentItem = param.getCurrentTouchItem(e);
currentItem.currentTouch = e.touches[0];
currentItem.starttTouch = e.changedTouches[0];
}
function touchMove (e) {
var currentItem = param.getCurrentTouchItem(e);
var currentTouch = currentItem.currentTouch;
var nowTouch = e.touches[0];
var movX = currentTouch.clientX - nowTouch.clientX;
var isMovToLeft = movX > 0;
movX += (currentItem.movX ? currentItem.movX : 0);
if (movX > param.movMax || movX < 0) {
return;
}
currentItem.currentTouch = nowTouch;
if (isMovToLeft) {
if (Math.abs(movX) > param.movMax) {
movX = param.movMax;
}
} else {
if (Math.abs(movX) < 0) {
movX = 0;
}
}
currentItem.stytle = "right:" + movX + "px;";
currentItem.movX = movX;
currentItem.isMovToLeft = isMovToLeft;
param.refreshTouchList();
}
function touchEnd (e) {
var currentItem = param.getCurrentTouchItem(e);
var movX = currentItem.movX;
if (currentItem.isMovToLeft) {
if (movX >= param.movChangeTriger) {
movX = param.movMax;
} else {
movX = 0;
}
} else {
if (movX < param.movMax - param.movChangeTriger) {
movX = 0;
} else {
movX = param.movMax;
}
}
currentItem.stytle = "right:" + movX + "px;";
currentItem.movX = movX;
param.refreshTouchList();
}
function setparam(param){
param = param;
}
module.exports = {
touchEnd: touchEnd,
touchMove: touchMove,
touchStart: touchStart,
setparam: setparam,
}