第五弹！手把手教你微信应用号开发

今天我们来看看如何实现一些前端的功能和效果。

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

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

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

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

静态布号局后我们开始实现新增分组效果网站推广我们开始实现新增分组效果

当然触发它出现的是

显示窗口

点击取消消失

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

当输入框事件发生时确定按钮会变成可以点击状态为空时DEDECMS为空时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轴；

标签： 分组事件距离左滑