移动端左滑删除功能

CSS:

body {

    margin-top: 10px;

}

html,body{

    overflow-x:hidden;

}

.bgColor_ffffff{

    background:#ffffff;

}

/*列表*/

.seekCare_list {

    margin-bottom: 10px;

    border-top: solid 1px #DFDFDF;

    border-bottom: solid 1px #DFDFDF;

    position: relative;

    height: 134px;

}

.seekCare_div{

    position: absolute;

    left: 0;

    right: 0;

    padding: 10px;

}

.seekCare_div:active {

    background-color: #EEEEEE;

}

/*宠物头像*/

.seekCare_img {

    width: 114px;

    height: 114px;

    float: left;

    margin-right: 10px;

}

/*右侧样式*/

.seekCare_right {

    padding-left: 124px;

}

.seekCare_right li {

    padding-right: 10px;

}

/*标题*/

.seekCare_title {

    line-height: 27px;

    height: 27px;

    font-size: 16px;

    border-bottom: solid 1px #DFDFDF;

}

.seekCare_title:last-child() {

    margin-bottom: 0;

}

.seekCare_title > div {

    float: left;

    margin-right: 10px;

}

.seekCare_title > div > img {

    width: 80px;

    height: 20px;

    vertical-align: middle;

    margin-top: -4px;

}

.seekCare_title > em {

    display: block;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

/*右侧列表*/

.seekCare_li {

    margin-top: 10px;

    overflow: hidden;

    font-size: 12px;

    line-height: 18px;

}

.seekCare_li img {

    width: 15px;

    height: 15px;

    vertical-align: middle;

    margin-right: 5px;

}

.seekCare_li em {

    margin-right: 5px;

    vertical-align:middle;

}

.seekCare_lastLi {

    float: left;

}

.seekCare_lastEm {

    display: block;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

.seekCare_zouShi {

    color: #ff6040;

}

/*删除按钮*/

.delBtn {

    position: absolute;

    right: -82px;

    top: -1px;

    height: 100%;

    border-left: solid 1px #ff3600;

    width: 80px;

    text-align: center;

    background-color: #ff3600;

    border-top: solid 1px #ff3600;

    border-bottom: solid 1px #ff3600;

}

.delInput {

    top: 50%;

    height: 20px;

    color: #ffffff;

    position: absolute;

    text-align: center;

    width: 100%;

    left: 0;

    margin-top: -10px;

}

.petName{

    max-width: 50px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

HTML:

<section class="seekCare_list bgColor_ffffff">

<div class="seekCare_div" style="position: absolute">

<img class="seekCare_img" οnerrοr="}" />

<div class="seekCare_right">

<ul>

<li class="seekCare_title">

<div class="seekCare_zouShi">

<img src="../image/seek_goHome.png" alt="到家啦" />

</div>

<div>

走失中：

</div>

<em></em>

</li>

<li class="seekCare_li">

<div>

<img src="../image/find_petName.png" alt="图标" />

<em class="petName">湿哒哒多阿打算啊爱的的啊</em><em><a>qq</a></em><em>我问问</em>

</div>

</li>

<li class="seekCare_li">

<div>

<img src="../image/mr_lishi.png" alt="图标" />

<em>驱蚊器翁群</em>

</div>

</li>

<li class="seekCare_li">

<div class="seekCare_lastLi"><img src="../image/gr_dizhi.png" alt="图标" />

</div>

<span class="seekCare_lastEm">21321</span>

</li>

</ul>

</div>

</div>

<div class="delBtn">

<input class="delInput" style="" type="button" value="删除"/>

</div>

</section>

JS代码：

var moveX = '', moveY = '', listPosition = 0, positionNum = '';

$(".seekCare_div").on("touchstart", function(e) {

var listNum = $(this).parent('.seekCare_list').index();

listPosition=$('.seekCare_list').eq(listNum).css('right').substring(0, $('.seekCare_list').eq(listNum).css('right').indexOf('p'));

startX = e.originalEvent.changedTouches[0].pageX;

startY = e.originalEvent.changedTouches[0].pageY;

});

$(".seekCare_div").on("touchmove", function(e) {

var listNum = $(this).parent('.seekCare_list').index();

moveEndX = e.originalEvent.changedTouches[0].pageX;

moveEndY = e.originalEvent.changedTouches[0].pageY;

moveX = moveEndX - startX;

moveY = moveEndY - startY;

//解决阻止页面滚动事件

var w = moveX < 0 ? moveX * -1 : moveX;

//x轴的滑动值

var h = moveY < 0 ? moveY * -1 : moveY;

//y轴的滑动值

if (w > h) {//如果是在x轴中滑动

e.preventDefault();

//解决阻止页面滚动事件end

if (moveX > 0) {

positionNum = listPosition - moveX - 0;

} else {

positionNum = listPosition - 0 - moveX;

}

$('.seekCare_list').eq(listNum).css('right', positionNum);

$('#removeX').text(moveX);

if (positionNum > 80) {

$('.seekCare_list').eq(listNum).css({

'right' : '80px'

});

} else if (positionNum < 0) {

$('.seekCare_list').eq(listNum).css({

'right' : '0'

});

}

}

});

$(".seekCare_div").on("touchend", function(e) {

var listNum = $(this).parent('.seekCare_list').index();

if (moveX < 0 && moveX <= -30) {

$('.seekCare_list').eq(listNum).animate({

'right' : '80px'

}, 50);

} else {

$('.seekCare_list').eq(listNum).animate({

'right' : '0'

}, 50);

}

});

$(".seekCare_div").on("click", function(e) {

var thiId = $(this).attr('thisId');

var thisState = $(this).attr('thisState');

find_help(thiId, thisState);

});

$('.delBtn').on('click',function(e){

var listNum = $(this).parent('.seekCare_list').index();

$(".seekCare_list").eq(listNum).remove();

//这里自己想后台传参数

});

能力有限，搜索好多文档才写出来，里面有好多坑，自己体会去吧。公共css样式没贴出来，样式可能会有问题，主要实现功能。如有不足之处欢迎各位大佬指点>.<

参考文档：http://www.cnblogs.com/lvmingyin/p/5372678.html

转载于:https://my.oschina.net/u/3011609/blog/858358