【活字格骚操作】给页面增加手势互动!

收藏

本帖最后由 phoben 于 2021-3-8 00:53 编辑

在针对手机、触摸屏等设备时，由于屏幕尺寸受限，不宜放太多按钮，但是如果此时又给用户良好交互体验改怎么办？
给大家分享一个思路，使用touch事件，让网页元素具备手势的识别能力。
以下为某客户的应用页面，需求是可以任意加减数量，要方便、快，还能精确的控制数量。
原来的做法是页面放很多按钮，点一次+1，再放个按钮点一次-1，再放一个按钮点一次+10 ........

现在利用了touch的特性，重新给交互赋能，操作如下：
1、向左拖动减少数量
2、向右拖动增加数量
3、上下拖动清零数量
4、双击按钮弹出自定义数量输入
手势+自定义数量2.gif

随着拖动距离数量可均速变化！

功能其实很简单，页面使用JS绑定touch事件，然后提取页面数据反写回去即可！

————————————————————————————————————

兼职活字格开发 | VX:13972707111
主攻：前端UI设计、交互逻辑设计、移动端页面设计、后端命令、表结构设计、业务逻辑处理等
个人简历：活字格低代码开发大赛二等奖、活字格高级认证工程师
案例：请点击个人主页查看，已与论坛多位大佬、企业合作开发过多款大中小型应用

phoben · phoben

lh123 发表于 2021-3-6 21:52
只要你放出图片，就成了我的产品了。

欢迎交流

phoben · phoben

lh123 发表于 2021-3-10 12:43
每次看到这个。这个牛人太牛了。

欢迎一起交流

COLD · COLD

完美

回复 · 137294886

完美

Tom猫 · Tom猫

先收了存着，希望以后有机会合作

phoben · phoben

Tom猫发表于 2021-3-14 15:31
先收了存着，希望以后有机会合作

期待~

Simon.hu · Simon.hu

我夏总还是我夏总啊~

		自动登录	找回密码
密码			立即注册

[使用感受] 【活字格骚操作】给页面增加手势互动!

7 个回复

时代开发者征文活动

微信认证勋章

悬赏达人

讲师达人

活字格认证

活字格高级认证

圣诞拼拼乐

元老葡萄