文档章节

第五弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿,每日更新!

博卡君
 博卡君
发布于 2016/09/27 20:33
字数 1777
阅读 6170
收藏 66

博卡君今天继续更新,忙了一天,终于有时间开工写教程。不罗嗦了,今天我们来看看如何实现一些前端的功能和效果。

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

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

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

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

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

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

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

当然触发它出现的是

显示窗口

点击取消消失

当里面的输入框内容发生改变时 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 表单提交事件。 除小部分接口方面欠缺外,写到这里其实分组前端方面效果基本实现。

好了,由于目前小程序开发工具图片上传还有点问题,拍照收纳无法实现,所以博卡君的微信小程序开发教程也先暂告一段落,等开发工具更新稳定后,我还会再追加教程的内容,有机会的话把成品也给大家看看。

感谢朋友们一直以来的支持和关心,大家可以拿这个教程作为参考,摸索出自己的小程序开发套路。我最近还会在论坛、微信公众号里收集一下大家的留言和问题,统一给大家一些回复。大家多多在咱们的 QQ 群内交流吧,群里每天都会有很多朋友交换代码、答疑解惑,对大家的开发和学习很有帮助。

© 著作权归作者所有

博卡君
粉丝 808
博文 16
码字总数 24235
作品 0
深圳
程序员
私信 提问
加载中

评论(5)

xiaozhou18
xiaozhou18
可以上源码么?
xiaozhou18
xiaozhou18
可以上源码么?
SD杨
SD杨
话说这个没有源码啊?
秋松蝶月
秋松蝶月
作者写的幸苦,赞一个😄
star_seek
star_seek
早😏
前端资源系列(3)-微信小程序开发资源汇总

微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件 文档 从搭建一个微信小程序开始 小程序开发文档 小程序设计指南 工具 小程序开发者工具 - 官方 Egret Wing 3.2.x 支持微信...

xzavier
2018/08/27
0
0
小程序 大假期,技术猿国庆假期的正确打开方式…

明天(10月1日)就是国庆黄金7天假了。作为技术猿,除了美美的睡一觉好像也没啥别的事了。与其窝在家里玩手机刷朋友圈,不如做个小程序玩玩。 微信小程序开发正当时,没有内测资格不要紧。这...

凝小紫
2016/09/30
5.8K
11
从零开始学做微信小程序,看这些就够了!

随着正式开放公测,微信小程序再次万众瞩目,越来越多的企业和个人涌入到小程序开发的大军中。小程序究竟是什么?适合做小程序的产品有哪些?做小程序需要提前准备什么?如何零基础学做小程序...

王练
2016/11/09
31K
23
微信小程序(应用号)资源汇总整理(转)

微信小应用资源汇总整理 开源项目 WeApp - 微信小程序版的微信 wechat-weapp-redux-todos - 微信小程序集成Redux实现的Todo list wechat-weapp-gank - 微信小程序版Gank客户端 wechat-dribb...

老朱教授
2017/10/09
0
0
第三弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿,每日更新!

感谢朋友们的支持!这两天博卡君收到了很多支持和安慰,也认识了很多志同道合的朋友。目前微信公布的工具和代码都不是正式版,随时有可能调整,大家先体验和学习为主吧。最近这个教程搞得我也...

博卡君
2016/09/23
12.5K
19

没有更多内容

加载失败,请刷新页面

加载更多

Spring Security 实战干货:基于配置的接口角色访问控制

1. 前言 欢迎阅读 Spring Security 实战干货 系列文章 。对于受限的访问资源,并不是对所有认证通过的用户开放的。比如 A 用户的角色是会计,那么他就可以访问财务相关的资源。B 用户是人事,...

码农小胖哥
30分钟前
3
0
vue admin template 轻量级 后台管理系统基础模板 vuecli4 分环境打包 统一管理接口地址

本模板目的是为了能在创建项目的时候,减少不必要的时间浪费,例如api接口的封装、axios请求的封装以及基础布局等时间的浪费,故将基础功能提取出来作为公司内部的一个后台基础管理系统,为什...

羊皮卷
31分钟前
2
0
idea免费版注册码

https://www.jiweichengzhu.com/article/eb340e382d1d456c84a1d190db12755c

码农屌丝
31分钟前
4
0
跨越敏捷和devops的鸿沟

day2 更多的是理念思想和一些经验的分享吧 先来个鸡汤: 每个人都有自己的人生高山去攀越,技术人也有技术的高山,不是人生的全部,但又不可缺少的,我们要选对方向,找对方法去坚持去爬山...

ikki8776
31分钟前
4
0
MyEclipse教程:JPA开发(数据库)

1、配置JPA项目 JPA是类似于Hibernate的持久性规范,已成为Java EE 5规范的一部分。JPA使用Java 5注释来控制将普通Java类(POJO)映射到数据库表。 您可以通过创建任意受支持的基础项目类型(...

沫沫77
39分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部