第八章:微信小程序分组开发与左滑功能实现
 
先来看看今天的整体思路:
进入分组管理页面 --> 点击新建分组新建
进入到未分组页面基本操作
进入到已建分组里面底部菜单栏操作 --> 从名片夹中添加进行操作。
 
理清完基本流程我们开始开发。首先整个布局可以先看下,我再一步步讲。
静态布号局后,我们开始实现新增分组效果,
当然触发它出现的是
显示窗口
点击取消消失
当里面的输入框内容发生改变时 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 表单提交事件。除小部分接口方面欠缺外,写到这里其实分组前端方面效果基本实现。
 

微信小程序微信公众号“微little程序”,扫码关注:

交流群号:526013379

微信小程序社区:www.xiaochengxu-wx.com

微信小程序实例教程(四)的更多相关文章

  1. 微信小程序实例教程(一)

    序言 开始开发应用号之前,先看看官方公布的「小程序」教程吧!(以下内容来自微信官方公布的「小程序」开发指南) 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果.这个小程序 ...

  2. 开发一个微信小程序实例教程

    一.注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可.2.注册成功后进入首页,在 小程序发布流程->小程序开 ...

  3. 微信小程序实例教程(二)

    第五章:微信小程序名片夹详情页开发 今天加了新干货!除了开发日志本身,还回答了一些朋友的问题. 闲话不多说,先看下「名片盒」详情页的效果图: 备注下大致需求:顶部背后是轮播图,二维码按钮弹出模态框信息 ...

  4. 微信小程序实例教程(三)

    第七章:微信小程序编辑名片页面开发   编辑名片有两条路径,分为新增名片流程与修改名片流程. 用户手填新增名片流程:   首先跳转到我们的新增名片页面 1 需要传递用户的当前 userId,wx.na ...

  5. 从零开始的微信小程序入门教程(一)

    之前说要和同事一起开发个微信小程序项目,现在也在界面设计,功能定位等需求上开始实施了.所以在还未正式写项目前,打算在空闲时间学习下小程序.本意是在学习过程中结合实践整理出一个较为入门且不是很厚的教程, ...

  6. 微信小程序把玩(四十)animation API

    原文:微信小程序把玩(四十)animation API 动画水还是比较深的,这里只是简单介绍下小程序中动画的一些属性和注意事项,做动画前一定要整理好思路将动画一步步分解,再进行组合!这里只做引入. w ...

  7. 微信小程序实例源码大全

    微信小程序实例源码大全下载 微信小应用示例代码(phodal/weapp-quick)源码链接:https://github.com/phodal/weapp-quick 微信小应用地图定位demo( ...

  8. 微信小程序开发教程目录

    本系列教程是自己在工作中使用到而记录的,没有顺序之分 如有错误之处,请给与指正,也不希望误导了别人 微信小程序开发教程目录 微信小程序之注册和入门 微信小程序之HTTPS请求 微信小程序开发之选项卡 ...

  9. 微信小程序开发教程 #043 - 在小程序开发中使用 npm

    本文介绍了如何在微信小程序开发中使用 npm 中包的功能,大大提高微信小程序的开发效率,同时也是微信小程序系列教程的视频版更新. 微信小程序在发布之初没有对 npm 的支持功能,这也是目前很多前端开发 ...

随机推荐

  1. Qt Creator下载和安装(详细教程)

    简介 Qt是跨平台的图形开发库,目前由Digia全资子公司 Qt Company 独立运营,官方网址: http://www.qt.io/ 也可以访问Qt项目域名:http://qt-project. ...

  2. Inno Setup入门(十四)——替换安装程序和卸载程序的图标

    通常Inno生成的安装文件的图标是一个光盘和显示器,如下图.同时,程序安装好之后,在安装目录下的卸载程序的图标也是一样的,其实我们也可以自己修改. 首先生成的安装文件图标.这个比较简单,只需要在Set ...

  3. openCV(二)---iOS中使用openCV的图片格式转换

    可以实现将UIImage和IplImage类型实现相互转换 //由于OpenCV主要针对的是计算机视觉方面的处理,因此在函数库中,最重要的结构体是IplImage结构. - (IplImage *)C ...

  4. 转 vi 技巧和诀窍:令人刮目相看的 10 个超酷命令

    for ksh vi 编辑器的许多选项可以控制编辑会话的外观和感觉.使用 :set 命令修改 vi 中的会话设置.按 Escape 键进入命令模式之后,可以使用 :set all 命令显示选项和设置的 ...

  5. Interview with Oleg

    Interview with Oleg time limit per test 1 second memory limit per test 256 megabytes input standard ...

  6. Spring Boot 系列教程2-Data JPA

    Spring Data JPA 用来简化创建 JPA 数据访问层和跨存储的持久层功能. 官网文档连接 http://docs.spring.io/spring-data/jpa/docs/curren ...

  7. 深入解析FileInputStream和FileOutputStream

    http://swiftlet.net/archives/1363 FileInputStream和FileOutputStream类属于字节类,可以操作任意类型的文件.在数据流的处理过程中,有两种情 ...

  8. AutoTile 自动拼接(五) 学习与实践

    今天不讲 权值检索,考虑到后期 自动拼接 做出来 更好玩,操作更方便.所以 今天我 补充一节, 网格计算与操作. 具体就是这么个效果,和地图编辑器一样,不过图块还是没有自然的拼接,这个一定一定是 下一 ...

  9. CodeForces 701C They Are Everywhere(map的应用)

    这个题比较好的解决办法,我觉得还是map,map的size可以很快的知道我们选了几个字母,而且可以作为计数器,知道每一个字母出现了多少次, erase函数可以清除掉一个元素. 所以,定义两个指针L和R ...

  10. 转:Loadrunner——Block(块)技术

    在使用LoadRunner时经常遇到这样一个问题,如果对不同的事务进行不同次数的循环该怎么处理?默认情况下LR对所有的事务都是统一执行的,即虽然有多个事务,但它们被执行的循环次数都是一样的,那么LR如 ...