H5焦点图

焦点图算是最基础的控件了,很多地方都在用,在网上找了一圈,没发现原生JS的,都是各种框架和库,正好自己写一个,发现里面小门道还挺多的,想要体验好,各种细节都要去抠才行:

1、大家都知道,一般翻页都是滑动距离超过 50% 才翻页,但如果快速滑动,即使滑动距离很短,也是可以翻页的,

这里就需要记录滑动开始的时间和滑动结束的时间,还要记录滑动的距离,设定一个范围值就ok,我设的是滑动耗时在150毫秒以下,距离在60以上,切换焦点图。

2、手机滑动焦点图,方向肯定不是很标准的横或竖,左或右。

所以呢,这里就需要计算滑动的方向,也就是角度,根据角度来判断往前翻,还是往后翻,为了体验好,例如大于-45度并且小于45度的,都算往右滑动,查看详细说明文章

3、体验好的焦点图,都是可以无限循环翻页的。

实现的方式也比较取巧,首先要克隆第一张图,并插入到父节点的最后,当翻到最后一页,再往后翻的话,就会翻到克隆的这一页,然后如果再往后翻,当 touchstart 刚触发的时候,会把图重置到第一幅图(第一和最后的图都一样,所以不会察觉到),这样,便实现了循环。如果要从第一幅图,往前滑动(从 dom 节点上看,第一幅图前面是克隆的图),就把 transform 的值,直接设成真实的最后一幅图的值,就行了。

4、仔细体验一下,当你在滑动焦点图的时候,页面是无法上下滚动的。在页面上下滚动的时候,你又无法滑动焦点图。

这需要在滑动的时候设置一个开关变量,来控制 touchmove 的时候,是否执行代码,还要 touchmove 的时候阻止浏览器默认事件 event.stopPropagation(),来实现滑动焦点图的时候,页面无法上下滚动;

前面说过了,要通过计算滑动的角度,来分出4个方向,上下左右。只有左右两个方向,会执行 touchmove 的代码,页面会滚动,上下两个方向不执行代码,页面不滚动,也就实现了页面上下滚动,无法滑动焦点图。

继续阅读 H5焦点图