html上下滑动视频代码,h5 实现视频手势上下屏滑动 (类似抖音)

h5 实现视频手势上下屏滑动 (类似抖音)

1. 首先考虑无限滑动的实现, 最初的第一反应, 是用竖向的轮播来实现.

这里要考虑的是如何实现无缝衔接～

是否开启无限循环

我是这样实现的, 总共轮播有三帧, 所以特殊的是前两张和没有后续数据的后两张, 是不存在无限循环的, 其它条件下存在无限循环.

前两张

currentIndex 为当前视频的下标, 那么 currentIndex<2 的时候, 返回轮播为 false.

后三张

当

currentIndex+3 > 总的视频数

, 这时候需要考虑后三张时候是无限循环, 如果滑动方向向上 (即手指下滑), 去返回上一页时, 那么当

currentIndex+2=== 总的视频数

时, 还是无限循环的, 其它情况则取消无限循环.

更新数据

同理, 前两张和后三张需要特殊处理

如果滑动方向向上 (即手指下滑), 则第 0 张没有前一张, 不需要处理

如果滑动方向向下 (即手指上滑), 那么前两张的位置不需要变, 之后的依次进行位置累计改变

如果不是后三张, 或者是手指下滑并且是倒数第二张, 这时, 进行数据替换.

如果位置是轮播的第 0 位, 则将轮播的第 1 位替换为 currentIndex+1, 将轮播的第 2 位替换为 currentIndex-1.

如果位置是轮播的第 1 位, 则将轮播的第 2 位替换为 currentIndex+1, 将轮播的第 0 位替换为 currentIndex-1.

如果位置是轮播的第 2 位, 则将轮播的第 0 位替换为 currentIndex+1, 将轮播的第 1 位替换为 currentIndex-1.

注: 至此, 无限滑动七七八八就这样了, 只是