使用zepto实现QQ消息左滑删除效果

有这样一个需求：

1. 有一个列表，将每一个列表项左滑动出现删除按钮；

2. 右滑动隐藏删除按钮；

3. 点击这个删除按钮删除该列表项。

完成以后的效果：

这是微信网页端的页面，使用的是 zepto 库。于是我按照这个需求，写好了html结构，样式和脚本，感觉没问题了，去调试，结果交互没效果，然而自己都不知道问题出在哪里。

具体到该项目中，我给 ".item-info" 添加左滑和右滑事件，给 ".remove" 添加删除事件，删除该列表项。

<li class="device-item">
    <div class="item-info">
        <div class="device-info">
            <img src="~/Content/img/alam-icon.png" alt="家报设备" class="img">
            <div class="text">
                <div class="code">@info.DeviceBarCode</div>
                <div class="detect">
                    浓度：<label detect>--</label>%LEL
                </div>
                <div class="state">
                    状态：<label state>--</label>
                </div>
            </div>
        </div>
        <div class="more-info">
            <a href="javascript: alert('开发中，敬请期待！')" title="设备详情" class="device-details">设备详情</a>
            <a href="javascript: alert('开发中，敬请期待！')" title="绑定信息" class="bind-info">绑定信息</a>
        </div>
    </div>
    <div class="remove icon icon-remove"></div>
</li>

这个项目的开发环境在 VS 中，所以上图中 img 的路径出现了 "~" ，这不必理会，与本文要讨论的解决方案无关。

CSS 如下，CSS 使用 LESS 编译生成，去除了讲解这个需求无关的代码：

.device-item {
  z-index: 2;
  margin-bottom: 20px;
  position: relative;
  width: 100%;
  height: 144px;
  overflow: hidden;
}
.device-item .item-info {
  z-index: 3;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 144px;
}
.device-item .remove {
  z-index: 4;
  position: absolute;
  top: 50%;
  right: -70px;
  transform: translateY(-50%);
  width: 70px;
  height: 144px;
  line-height: 144px;
  text-align: center;
  font-size: 30px;
  color: #f00;
}

这段 CSS 中，我将列表项 ".device-item" 设置为了固定的高度 144px，避免因为定位属性的破坏性造成该元素内容不显示的问题。

将删除按钮宽度设置为了 70px，距离右侧 -70px。由于 ".icon.icon-remove" 类包含了删除的图标，故该元素中没有多余的子元素和相应的样式。

// 每一项列表左滑出现删除按钮，提供解绑该设备
$(".item-info").on("swipeLeft", function () { //左滑显示隐藏的删除按钮
    $(this).animate({ left: "-70px" }, 400, "linear").siblings(".remove").animate({ right: 0 }, 400, "linear");              
});
$(".item-info").on("swipeRight", function () { //右滑恢复 
    $(this).animate({ left: 0 }, 400, "linear").siblings(".remove").animate({ right: "-70px" }, 400, "linear");
});
$(".remove").tap(function () { //删除
    $(this).parent().remove();
});

以上 js 代码是最终的代码，没有问题，可是开始调试的时候就是没有出现我想要的需求，却出现了这样的效果：

1. 页面可以向左滑动，可是滑动的整个文档(也就是从任何地方向左滑动整个页面都向左滑了)

2. 点击 ".remove" 按钮没反应。

 

原因是这样的：

1. 我没有给列表项 ".device-item" 设置 overflow: hidden;

导致 ".remove" 删除按钮没有被隐藏，只是被挤到页面可视区域之外了，向左滑动的时候是滑动的整个页面，相当于出现了横向滚动条，滑动查看右边的内容。

2. 我没有在 HTML 中引入 touch.js 和 fx.js 两个 zepto 模块。

zepto 默认构建包含: Core, Ajax, Event, Form, IE几个模块，要使用 animate 需要再引用 fx 模块，要使用 tap 需要再引用 touch 模块。

该点参考 zepto 官网 zepto modules 部分的说明 http://zeptojs.com/#modules

引用以上模块可以通过在 github 上下载 https://github.com/madrobby/zepto 源文件包，打开 src 目录引用相应的代码。

<script src="~/Content/Scripts/zepto.min.js"></script>
<script src="~/Content/Scripts/touch.js"></script>
<script src="~/Content/Scripts/fx.js"></script>