移动端左右滑动切换页面效果(纯-JavaScript)

前言：左右滑动切换页面效果以及思路：

1、可以通过JavaScript效果完成

2、也可以通过Swiper轮播图完成

3、本篇文章通过原生JavaScript完成，以及轮播联合tab切换卡功能的思路

想要了解更多可以关注博客⭐⭐七条小鲤鱼的博客⭐⭐

一.介绍左右滑动的重要性

二、实现的思路

第一步：事件监听

第二步：事件处理逻辑

三、全部代码-以及效果展示（JavaScript）

扩展：实现滑动效果并结合tab切换卡，实现思路如下：

1. 设计布局

2. 使用变量控制高亮

3. 实现滑动逻辑

4. 监听滑动事件

一.介绍左右滑动的重要性

移动端左右滑动效果是一种常见的用户界面交互方式，它能够提供流畅的用户体验并增强应用的直观性。以下是一些实现移动端左右滑动效果的场景和方法：

页面切换：在移动端应用中，左右滑动可以用来在不同的页面或视图之间切换。这种效果可以用于图像画廊、故事讲述或导航菜单等场景。
列表滑动：在长列表中，用户可以通过左右滑动来浏览不同的列表项。这种滑动效果可以提高用户在浏览大量数据时的效率。
卡片式布局：在卡片式布局中，左右滑动可以帮助用户在不同的卡片之间切换，每个卡片代表一个独立的信息块或功能模块。
弹出菜单：移动端的弹出菜单或侧边栏可以通过左右滑动来显示或隐藏，为用户提供更多的操作选项或信息。
过渡动画：在Vue中，可以使用transition组件来实现左右滑动的过渡动画。例如，可以通过监听触摸事件来捕捉用户的滑动动作，并使用CSS过渡动画来实现平滑的页面切换效果。
滑动库：如果需要快速实现滑动效果，并且不需要过多的定制化，可以考虑使用第三方滑动库，如Swiper、Hammer.js等。这些库提供了丰富的API和更稳定的体验。
自定义滑动动画：开发者可以根据具体需求，使用CSS和JavaScript来实现自定义的滑动动画效果。这包括定义动画样式、监听触摸事件以及处理滑动逻辑。
性能优化：在实际项目中，还需要考虑性能优化，如使用keep-alive来缓存页面，减少页面的重复渲染，以及使用防抖或节流技术来避免频繁触发事件。

通过这些方法，开发者可以在移动端应用中实现左右滑动效果，提升用户的交互体验。

二、实现的思路

第一步：事件监听

在移动端实现滑动效果，需要监听三个关键的触摸事件：

touchStart：当用户开始触摸屏幕时触发。
touchMove：当用户在屏幕上移动手指时触发。
touchEnd：当用户抬起手指，结束触摸操作时触发。

第二步：事件处理逻辑

接下来，我们需要明确在每个事件触发时应该执行的操作：

touchStart 事件：
- 记录触摸开始时的坐标（startX）。
- 初始化滑动距离（distanceX）为0。
- 重置滑动容器的初始位置。
- 设置一个标志（isMove）来跟踪是否开始滑动。
- 代码:
```
        //按下function handleTouchStart(e) {startX = e.touches[0].clientX;console.log(startX); //当前按下的位置}
```

touchMove 事件：

获取当前触摸点的坐标（currentX）。
计算滑动距离（distanceX）为当前坐标与起始坐标的差值。
根据滑动距离更新滑动容器的位置。
判断滑动方向，如果超出边界则限制滑动范围。
如果滑动距离超过一定阈值，可以设置一个标志来触发页面切换。

代码：

 //按下移动function handleTouchMove(e) {const moveX = e.touches[0].clientX;// console.log(moveX);const movedDistance = Math.abs(moveX - startX); // 计算移动的距离console.log(movedDistance);// 如果移动的距离小于80，不进行更新位置的操作if (movedDistance < 80) {return;}//如果 moveX 大于 startX 就是往右滑动 并且页数为0 就不行 ,或者 moveX 小于 startX 并且页数是最后一页页不行if ((moveX > startX && pageIndex === 0) ||(moveX < startX && pageIndex === oSliderItems.length - 1)) {return}distanceX = moveX - startX;setTranslateX(-pageWith * pageIndex + distanceX)isMove = true;}

touchEnd 事件：

判断滑动距离是否超过页面切换的阈值。
如果超过阈值，执行页面切换逻辑。
如果未超过阈值，执行回弹逻辑，将滑动容器恢复到初始位置。
重置滑动相关的变量，为下一次滑动做准备。

//松开function handleTouchEnd() {if (isMove) {if (Math.abs(distanceX) >= pageWith / 3) {if (distanceX > 0) {pageIndex--;}if (distanceX < 0) {pageIndex++;}}setTranslateX(- pageIndex * pageWith)}startX = 0;distanceX = 0;isMove = false}function setTranslateX(tranX) {oScrollWrapper.style.transition = 'all .1s'oScrollWrapper.style.transform = `translate(${tranX}px)`}

注意：在touchMove 事件，中需要判断一下，往右或者往左滑动的距离是否大于50-80，这样可以避免如果页面是一个很长的page，往下滚动就会左右抖动，影响用户体验。

-----全部代码-以及效果展示（JavaScript）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo</title><script>document.documentElement.style.fontSize =document.documentElement.clientWidth / 37.5 + 'px'</script><style>body {margin: 0;}html,body,#app {height: 100%;}div {display: flex;width: 100%;flex-direction: column;}.slider-page {position: relative;height: 100%;overflow: hidden;}.scroll-wrapper {position: absolute;width: 400vw;height: 100%;flex-direction: row;}.slider-item {width: 100vw;height: 100%;flex: 1;}.slider-item:nth-child(1) {background-color: rgb(247, 150, 150);}.slider-item:nth-child(2) {background-color: rgb(123, 255, 0);}.slider-item:nth-child(3) {background-color: rgb(0, 255, 238);}.slider-item:nth-child(4) {background-color: rgb(255, 0, 195);}.slider-item .inner {height: 100%;justify-content: center;align-items: center;font-size: 50px;}</style>
</head><body><div id="app"><div class="slider-page"><div class="scroll-wrapper"><div class="slider-item"><div class="inner">Page1</div></div><div class="slider-item"><div class="inner">Page2</div></div><div class="slider-item"><div class="inner">Page3</div></div><div class="slider-item"><div class="inner">Page4</div></div></div></div></div><script>//oSlidePage 最大的页面盒子//oScrollWrapper内部的盒子总宽// oSliderItems 每个小盒子// pageWith 页面宽度const oSlidePage = document.querySelector('.slider-page'),oScrollWrapper = oSlidePage.querySelector('.scroll-wrapper'),oSliderItems = oScrollWrapper.querySelectorAll('.slider-item'),pageWith = oSlidePage.offsetWidth;console.log('当前视口的宽度', pageWith);// 移动端事件  touchstart  touchmove touchendlet startX = 0,pageIndex = 0,distanceX = 0isMove = false;//初始化const init = () => {bindEvent()}function bindEvent() {oScrollWrapper.addEventListener('touchstart', handleTouchStart, false)oScrollWrapper.addEventListener('touchmove', handleTouchMove, false)oScrollWrapper.addEventListener('touchend', handleTouchEnd, false)}//按下function handleTouchStart(e) {startX = e.touches[0].clientX;console.log(startX);}//按下移动function handleTouchMove(e) {const moveX = e.touches[0].clientX;// console.log(moveX);const movedDistance = Math.abs(moveX - startX); // 计算移动的距离console.log(movedDistance);// 如果移动的距离小于80，不进行更新位置的操作if (movedDistance < 80) {return;}//如果 moveX 大于 startX 就是往右滑动 并且页数为0 就不行 ,或者 moveX 小于 startX 并且页数是最后一页页不行if ((moveX > startX && pageIndex === 0) ||(moveX < startX && pageIndex === oSliderItems.length - 1)) {return}distanceX = moveX - startX;setTranslateX(-pageWith * pageIndex + distanceX)isMove = true;}//松开function handleTouchEnd() {if (isMove) {if (Math.abs(distanceX) >= pageWith / 3) {if (distanceX > 0) {pageIndex--;}if (distanceX < 0) {pageIndex++;}}setTranslateX(- pageIndex * pageWith)}startX = 0;distanceX = 0;isMove = false}function setTranslateX(tranX) {oScrollWrapper.style.transition = 'all .1s'oScrollWrapper.style.transform = `translate(${tranX}px)`}init()</script>
</body></html>