前端开发移动端滑动效果

本文探讨了移动端前端开发中如何实现滑动效果,特别是在商品详情页的选项卡切换和幻灯片展示。通过监听触摸开始、移动和结束事件,结合CSS3的transform属性,实现流畅的幻灯移动效果。在无效滑动情况下,通过降低滑动速度提供友好的用户体验。同时,文章提到了移动端相比于PC端开发中使用transform带来的性能优势。
摘要由CSDN通过智能技术生成

移动端人机交互方式同PC端发生了本质的变化,在PC端使用鼠标和键盘进行交互,而移动端使用的是手指的触摸和滑动。PC端开发时主要监听鼠标事件,例如mouseEnter(鼠标进入事件)、mouseMove(鼠标移动事件)、mouseLeave(鼠标离开事件)。而在移动端监听事件为触摸的开始事件,触摸移动事件,以及触摸的结束事件。在本设计中商品详情页通过选项卡来达到切换显示基本信息、商品细节信息以及评论信息。在基本信息通过幻灯效果显示商品的大图,通过手指的滑动来控制幻灯的显示。移动端手势操作效果图:


实现的方法是监听手势的开始事件,记录手指在屏幕上的起始位置。监听手势的移动事件,获取移动中手指的坐标,并将移动的手指坐标减去起始位置的坐标得到手指移动的距离。然后实时地去改变幻灯片的transform的值来达到幻灯移动的效果。最后需要监听手势的结束事件,在该事件的处理函数中得到手指最后的位置,同样使用最后的位置减去手指的起始位置得到最终手指移动的距离,判断手指最终的移动距离是否大于滑动的临界值,本设计在此处设置临界值为100px,如果大于临界值则切换幻灯片,否则不进行切换。
在切换中特殊情况是幻灯处于第一张并向左滑动,以及最后一张并向右滑动,这两种操作都是无效的因为第一张幻灯左侧以及第二张幻灯右侧都是没有图片的。如何友好的告诉用户已近滑动到了第一张或者最后一张是提升用户体验的关键。在本设计中借鉴了各大主流电商平台的主流做法,即在无效滑动情况下降低幻灯的滑动速度让用户知道已近无法移动了。这种做法既保持了操作上的一致性,因为没有直接不响应用户的操作,又清楚明白的告诉了用户已经滑动到了尽头。
在PC端的开发过程中,使用绝对定位改变top与left的值来实现元素的移动。在第一次尝试使用绝对定位来实现,当手指滑动

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值