#长按上方二维码，参与OSC年度盛典#

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

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

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

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

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

☑进入所创建群组底部菜单栏，选择从名片文件夹添加。

☟

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

静态编号之后我们开始实现新的分组效果▼

当然，触发它出现的是▼

显示窗口▼

点击取消即可消失▼

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

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

样式数据绑定▼

如果里面有表格的话，就用from。▼

创建群组请求互动。▼

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

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

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

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

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

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

点击直接跳转页面▼

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

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

就在这里用吧。

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

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

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

最后将数据绑定到页面。▼

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

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

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

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

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

一定要记住数据（{

：真的

}）

否则页面加载完成后就会出现模态框。▼

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

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

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

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

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

当用户点击进入自己创建的群组时，会点击顶部菜单键，显示下拉菜单栏，这里我们直接使用微信提供的组件即可。 ▼

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

整个布局和首页基本一致，这里就不多说了。▼

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

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

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

谢谢大家一直以来的支持和关注，大家可以以本教程为参考，找到适合自己的小程序开发套路。我也会把大家最近在论坛和微信公众号的留言和问题收集起来，统一给大家一些回复。大家在我们群里多交流吧，群里有很多小伙伴每天交流代码，解答问题，对大家的开发和学习很有帮助。

群號：

（第2组，可添加）

（三组，可添加）