H5移动端实现左右滑屏切换页面

最新推荐文章于 2024-08-16 09:49:53 发布

水冰月的小兔子

最新推荐文章于 2024-08-16 09:49:53 发布

阅读量1w

点赞数 4

分类专栏： vue css javascript 文章标签： vue.js html5 touch

本文链接：https://blog.csdn.net/qq_15385627/article/details/103913471

版权

本文介绍了如何在H5移动端利用vue.js和touch事件实现左右滑动切换页面，通过监听touchstart、touchmove和touchend事件，结合页面动画，达到平滑的切换效果。在实现过程中，遇到的滚动冲突问题通过阻止事件冒泡和判断滚动方向得到解决，最终实现了在可水平滚动区块自由滚动，同时保持页面切换功能。

摘要由CSDN通过智能技术生成

项目中需要实现的一个需求是顶部有一个tab选择框,点选某一个tab的时候切换页面，并且支持手势滑动，左滑右滑可以同点选tab一样切换页面。
根据项目中选用的ui组件cube-ui为基准查看了一下可实现的方案，比如可以直接用swipe或者是slide实现，但根据之前的实现方案来看，多少都会有些问题，尤其是在页面嵌套了很多层的垂直和水平滚动的情况下，会让滚动很不流畅。
于是选用了移动端的touch事件，整个功能就是监听页面touchstart,touchmove,touchend这三个事件来做的。
首先页面结构如下：

<div class="home-main flex-1" @touchstart.capture='touchStart' 		    @touchmove.capture="touchMove" @touchend.capture='touchEnd'>
     <transition :name="transitionName" mode="out-in">
        <keep-alive>
          <router-view/>
        </keep-alive>
      </transition>
</div>

在router-view里面就是需要进行切换的页面，页面切换不能太生硬需要加入动画，并且左滑右滑的动画效果是不一样的。
那么接下来就是滑动样式：

 .slide-right-enter-active {
      transition: all .8s ease;
    }
    .slide-right-leave-active {
      transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .slide-right-enter {
      opacity: 0;
      transform: translateX(-100%);
    }
    .slide-right-leave-to {
      opacity: 0;
      transform: translateX(100%);
    }
    .slide-left-enter-active {
      transition: all .8s ease;
    }
    .slide-left-leave-active {
      transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .