手揣网教程/应用软件/内容

微信小程序开发(二)完成分组开发与左滑技巧

应用软件2024-04-03 阅读
[摘要]实现分组开发与左滑功能先来看看今天的整体思路:进入分组管理页面-->点击新建分组新建进入到未分组页面基本操作进入到已建分组里面底部菜单栏操作-->从名片夹中添加进行操作。理清完基本流程我...
实现分组开发与左滑功能先来看看今天的整体思路:
进入分组管理页面-->点击新建分组新建
进入到未分组页面基本操作
进入到已建分组里面底部菜单栏操作-->从名片夹中添加进行操作。

微信小程序开发(二)完成分组开发与左滑技巧



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

微信小程序开发(二)完成分组开发与左滑技巧



静态布号局后,我们开始实现新增分组效果,当然触发它出现的是

微信小程序开发(二)完成分组开发与左滑技巧



显示窗口

微信小程序开发(二)完成分组开发与左滑技巧



点击取消消失

微信小程序开发(二)完成分组开发与左滑技巧



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

微信小程序开发(二)完成分组开发与左滑技巧



当输入框事件发生时,确定按钮会变成可以点击状态,为空时,addTeam

微信小程序开发(二)完成分组开发与左滑技巧



样式数据绑定。

微信小程序开发(二)完成分组开发与左滑技巧



里面有表单就使用了 from。

微信小程序开发(二)完成分组开发与左滑技巧



创建分组请求交互。

微信小程序开发(二)完成分组开发与左滑技巧



创建分组完成,这里可能很多疑问,为什么不使用微信提供的模态框组件来实现,而是自己实现,其实我也很懒,非常想使用自带的模态框组件,但是发现在模态框里面提交表单好像有点麻烦,直接自定义了。
接下来创建好的分组支持左滑删除与重命名,今天重点谈下左滑删除的实现方式。首先需要左滑的是被创建好的分组,未分组是写死的,故而不支持的。
左滑删除使用了两个事件 bindtouchstart 与 bindtouchmove,这里必须绑定它的 id,这个 id 都是不同的,我这使用的用户创建完成后在后台生成的一个 id 号,之后我再 block 出来使用在这里,这个 id 都是唯一的,不能是相同的 id。

微信小程序开发(二)完成分组开发与左滑技巧



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

微信小程序开发(二)完成分组开发与左滑技巧



现在我们来看事件构成:Bindtap 点击之后直接是跳转页面。

微信小程序开发(二)完成分组开发与左滑技巧


微信小程序开发(二)完成分组开发与左滑技巧



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

微信小程序开发(二)完成分组开发与左滑技巧


微信小程序开发(二)完成分组开发与左滑技巧


微信小程序开发(二)完成分组开发与左滑技巧



bindtouchStart 发生后,会执行 bindtouchmove 事件,在这里我们可以判断是否左右滑动:

微信小程序开发(二)完成分组开发与左滑技巧


【相关推荐】

1. 微信小程序完整源码下载

2. 微信小程序游戏类demo挑选不同色块

3. 微信小程序学习用demo推荐:聊天室+音视频+添加内容+

以上就是微信小程序开发(二)实现分组开发与左滑功能的详细内容,更多请关注php中文网其它相关文章!


小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。

……

相关阅读