文档介绍：微信小程序开发教程(第5弹)
微信小程序开发教程(第5弹)
本系列:
《微信小程序开发教程(第1弹)》《微信小程序开发教程(第2弹)》《微信小程序开发教程(第3弹)》《微信小程序开发教程(第4弹)》
博卡君今天继续更新,忙了一天,终于有时间开工写教程。不罗嗦了,今天我们来看看如何实现一些前端的功能和效果。
第八章:微信小程序分组开发与左滑功能实现
先来看看今天的整体思路:
进入分组管理页面–>点击新建分组新建
进入到未分组页面基本操作
进入到已建分组里面底部菜单栏操作–>从名片夹中添加进行操作。
理清完基本流程我们开始开发。首先整个布局可以先看下,我再一步步讲。
静态布好局后,我们开始实现新增分组效果,
当然触发它出现的是
显示窗口
点击取消消失
当里面的输入框内容发生改变时 bindinput 事件,大家别使用 bindchange
事件,这里的bindchange
事件只有当失去焦点时才会被触发。
当输入框事件发生时,确定按钮会变成可以点击状态,为空时,addTeam
样式数据绑定。
里面有表单就使用了 from
。创建分组请求交互。
创建分组完成,这里可能很多疑问,为什么不使用微信提供的模态框组件来实现,而是自己实现,其实我也很懒,非常想使用自带的模态框组件,但是发现在模态框里面提交表单好像有点麻烦,直接自定义了。
接下来创建好的分组支持左滑删除与重命名,今天重点谈下左滑删除的实现方式。
首先需要左滑的是被创建好的分组,未分组是写死的,故而不支持的。
左滑删除使用了两个事件 bindtouchstart 与 bindtouchmove,这里必须绑定它的 id,这个 id都是不同的,我这使用的用户创建完成后在后台生成的一个 id 号,之后我再 block 出来使用在这里,这个 id 都是唯一的,不能是相同的 id。
样式布局,父元素是绝对定位,子元素删除是相对定位,鉴于动画效果,我这加了 css3 的动
画效果,使滑动带点动画效果。
现在我们来看事件构成:
Bindtap 点击之后直接是跳转页面。
左滑从触摸事件开始,当然需使用的参数在外面最好先定义一下:
bindtouchStart 发生后,会执行 bindtouchmove
事件,在这里我们可以判断是否左右滑动:Var dataId = //获取到前面唯一的id;If(key){ //用户左滑距离很长时会发生多次左滑事件,这里定义一个开关发生第一次之后就关闭它;Touch是获取触摸点的一些
数据,touches 是一个触摸点的数组,每个触摸点包括以下属性:pageX,pageY:距离文档左上角的距离,文档的左上角为原点,横向为 X 轴,纵向为 Y 轴;clientX,clientY:距离页面可显示区域(屏幕除去导航条)左上角距离,横向为X轴,纵向为Y轴;screenX,screenY:距离屏幕左上角的距离,屏幕左上角为原点,横向为X轴,纵向为Y轴;
这里使用 clientX,clientY 即可。
我们在 bindtouchstart 时记录到开始的点,在 bindtouchmove 记录到触摸结束的点,