本文由《名片盒》团队撰写，感谢“博卡君”推荐

本系列：

博卡君今天继续更新，忙了一天终于有时间开始写教程了，废话不多说，今天就来看看如何实现一些前端的功能和效果吧。

第八章：微信小程序群开发及左滑功能实现

我们先来看一下今天的整体思路：

进入群组管理页面–>点击创建新群组

进入非分组页面的基本操作

进入创建的群组，选择底部菜单栏中的操作–>从名片文件夹添加即可继续。

搞清楚了基本流程之后我们就开始开发了。首先大家可以看一下整个布局，然后我会一步步讲解。

静态布局之后我们开始实现新的分组效果。

当然，触发它出现的原因是

展示窗

点击取消即可消失

当输入框内容改变时，请不要使用事件，这里的事件只有当失去焦点时才会触发。

当输入框事件发生时，OK 按钮变为可点击。当输入框为空时，

样式数据绑定。

如果里面有表格，就使用from。

创建群组请求交互。

群创建完成了，这里可能会有很多疑问，为什么不使用微信提供的模态框组件来实现，而是自己实现呢？其实我也很懒，很想用内置的模态框组件，但是觉得在模态框里提交表单好像有点麻烦，所以就直接自定义了。

接下来创建的群组支持左滑删除和重命名，今天我们重点讲一下如何实现左滑删除。

首先，您需要在创建的组上向左滑动。取消分组的组是硬编码的，因此不支持。

左滑删除用到了两个事件，这里必须绑定它的id，这个id是不一样的，我用的是用户创建后后台生成的一个id号，后面这里还会用到，这个id是唯一的，不能是同一个id。

样式布局，父元素是绝对定位，子元素删除是相对定位。考虑到动画效果，我添加了CSS3的动画效果，让滑动能有一些动画效果。

现在我们看一下事件组成：

单击即可直接跳转到该页面。

左滑动从触摸事件开始，当然最好先定义好外面要用到的参数：

发生之后就会执行事件，在这里我们可以判断是向左滑动还是向右滑动：

这里就使用 。

我们记录触摸时的起点，触摸时的终点，如果X轴滑动大于Y轴，并且终点减起点小于某个值（这个数组可以自己设置，我考虑到敏感度，设置很小），向右滑动也是一样。

确定了左右滑动事件之后，我们需要给当前组件绑定数据，数据从哪里来呢？大家可以看一下我的数组的由来，在左滑动事件中是如何获取的（我的数据是数组，需要在wxml中）。

这时候我拿到了需要的数组，循环出来之后再比较，如果数据的id == 当前正在操作的事件的id，那么我就给数组增加15%的右偏移量，否则其他的就不偏移了。右滑动也是一样，全部直接置0。

最后将数据绑定到页面。

OK，向左滑动的效果就实现了。

如果所有内容看起来都滚动了，请记住将其添加到外层并关闭 X 轴。

这时候如果向左滑动就会出现点击的效果，官方文档给我们提供了完美的解决方案，无需冒泡点击事件。

点击删除事件，弹出模态框让用户确认是否删除。

在这里点击取消的时候，记得把左滑删除按钮去掉，这样可能会提供更好的用户体验。

一定要记住数据（{

：真的

}）

否则，页面加载后就会出现模态框。

点击取消分组按钮，进入取消分组名片列表页面。

这个布局完全照搬首页，只是数据界面变了，有兴趣的可以回头看看之前的。

点击多选，会出现一个多选框和一些操作按钮，这些都是数据绑定，显示和隐藏类的实现比较简单。

对于多选，我们可以直接设置开关。

选中名片之后，点击设置分组，会弹出一个新建的分组列表，供用户确定将其设置到哪个组中（这里就不再继续写了，因为后台界面还在完善中）。

当用户点击自己创建的群组时，点击顶部菜单按钮会出现下拉菜单栏，这里直接用的是微信提供的组件。

最后点击从名片添加，进入如下页面：

整体布局和首页基本一致，这里就不再赘述了。

只需在顶部菜单中选择多个绑定数据。

表单类基本都是来自表单提交事件，除了少了几个接口，分组前端效果基本都实现到这里了。

好了，由于小程序开发工具中上传图片还存在一些问题，无法实现照片存储，所以博卡君的微信小程序开发教程就暂时告一段落了。等开发工具更新稳定后，我会添加更多的教程内容，有机会的话再把成品展示给大家看。