微信小程序分组开发与左滑功能实现

今天给你们带来的是微信小程序分组开发与左滑功能实现。

先来看看今天的总体思路：

进入分组管理页面-->点击新建分组新建

进入到未分组页面基本操做

进入到已建分组里面底部菜单栏操做-->从名片夹中添加进行操做。

 

 

 

 

 

理清完基本流程咱们开始开发。首先整个布局能够先看下，我再一步步讲。

 

静态布号局后，咱们开始实现新增分组效果，

 

固然触发它出现的是

 

显示窗口

 

点击取消消失

 

当里面的输入框内容发生改变时 bindinput 事件，你们别使用 bindchange 事件，这里的 bindchange 事件只有当失去焦点时才会被触发。

 

当输入框事件发生时，肯定按钮会变成能够点击状态，为空时，addTeam

 

样式数据绑定。

 

里面有表单就使用了 from。

 

建立分组请求交互。

 

建立分组完成，这里可能不少疑问，为何不使用微信提供的模态框组件来实现，而是本身实现，其实我也很懒，很是想使用自带的模态框组件，可是发如今模态框里面提交表单好像有点麻烦，直接自定义了。

接下来建立好的分组支持左滑删除与重命名，今天重点谈下左滑删除的实现方式。

首先须要左滑的是被建立好的分组，未分组是写死的，故而不支持的。

左滑删除使用了两个事件 bindtouchstart 与 bindtouchmove，这里必须绑定它的 id，这个 id 都是不一样的，我这使用的用户建立完成后在后台生成的一个 id 号，以后我再 block 出来使用在这里，这个 id 都是惟一的，不能是相同的 id。

 

样式布局，父元素是绝对定位，子元素删除是相对定位，鉴于动画效果，我这加了 css3 的动画效果，使滑动带点动画效果。

 

如今咱们来看事件构成：

Bindtap 点击以后直接是跳转页面。

 

 

左滑从触摸事件开始，固然需使用的参数在外面最好先定义一下：

 

 

 

bindtouchStart 发生后，会执行 bindtouchmove 事件，在这里咱们能够判断是否左右滑动：

 

• Var dataId = e.currentTarget.id //获取到前面惟一的id； If(key){ //用户左滑距离很长时会发生屡次左滑事件，这里定义一个开关发生第一次以后就关闭它；
• Touch是获取触摸点的一些数据，touches 是一个触摸点的数组，每一个触摸点包括如下属性：
• pageX,pageY：距离文档左上角的距离，文档的左上角为原点 ，横向为 X 轴，纵向为 Y 轴；
• clientX,clientY：距离页面可显示区域（屏幕除去导航条）左上角距离，横向为X轴，纵向为Y轴；
• screenX,screenY：距离屏幕左上角的距离，屏幕左上角为原点，横向为X轴，纵向为Y轴；

这里使用 clientX,clientY 便可。
咱们在 bindtouchstart 时记录到开始的点，在 bindtouchmove 记录到触摸结束的点，若是 X 轴滑动大于 Y 轴的，再若是结束点-开始点小于一个数值（这个数组能够本身设置，鉴于灵敏度，我这设置的很小），右滑也是同理。

 

判断到左滑与右滑事件后，咱们就须要对当前组件绑定数据了，数据从那里来？能够看下我这数组一个来历，以及怎么被左滑事件里面获取到（我这数据是一个数组，须要在 wxml 里面 block 的）。

 

这时候取到须要的数组，循环出来后，我进行对比，若是数据的 id== 当前被事件操做的 id，那么我给改数组再添加一个 right 向右偏移 15%，不然其余都不偏移，右滑同理，直接所有设置为 0。

 

 

最后把数据到绑定到页面上来。

 

OK，左滑效果实现。

 

若是出现所有被滚动了，记得在外层加上，X 轴关闭便可。

 

这时候你点击左滑会出现点透效果，官方文档提供给咱们一个 catch，不冒泡点击事件，便可完美解决。

 

点击删除事件弹出模态框供用户肯定是否删除。

 

这里你点击取消时还要记得把左滑删除按钮去掉可能用户体验会好点。

 

必定记得在 data({
modalHidden:true
})
否则会出现一加载页面即出现了模态框。

 

点击未分组按钮进入到未分组名片列表页面。

 

这个布局彻底是 copy 首页过来的，后面只是数据接口有变而已，你们有兴趣能够回过去看下前面的。

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

 

多选咱们直接给 checked 设置 Boole 开关。

 

 

选择好名片后点击设置分组会弹出新建好的分组列表供用户肯定设置到那个分组里面（这里因为后台接口方面还在完善，不继续往下写了）。

用户已建分组点击进去的是点击顶部菜单按钮出现下拉菜单栏，这里直接使用微信提供的组件。

 

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

 

整个布局基本仍是和首页面差很少，这里再也不多讲，

 

顶部菜单直接多选绑定数据便可。

 

牵扯到表单类的基本全都是 from 表单提交事件。 除小部分接口方面欠缺外，写到这里其实分组前端方面效果基本实现。