vue移动端实现（同一路由下）点击滑动转换多个菜单模块

最新推荐文章于 2023-08-10 15:40:58 发布

前端小桃

最新推荐文章于 2023-08-10 15:40:58 发布

阅读量502

点赞数 1

分类专栏： vue项目踩坑文章标签： javascript vue

本文链接：https://blog.csdn.net/megamind0430/article/details/108649303

版权

本文介绍了如何在Vue移动端应用中，不跳转路由实现点击滑动切换多个菜单模块。借助vue和element-ui，通过监听滑动事件，动态计算并切换内容。详细讨论了滑动开始、过程和结束的处理，以及位移计算方法。最后，作者邀请读者交流和反馈。

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

vue移动端实现（同一路由下）点击滑动转换多个菜单模块

收到如题的需求，不用跳转路由进行滑动切换，搜索了半天也没有搜到一个适合我的文章，那就只能自己写了，具体思路借鉴了vue不使用其他插件实现新闻app中左右滑动切换tab菜单和div内容的动画效果（移动端），稍加修改。

首先是效果图

在这里插入图片描述
（哪个大佬教教我怎么免费把视频做动图QAQ）
可以接受后台数据动态生成菜单列表，利用x轴拖动数据计算判断是否翻页，翻页也是利用x轴位移做的，因为目前只需要两页，所以只写了两个页面的位移，未来如果有更多模块需求再进行优化。

style样式

<style scope lang="scss">
body,
html .takeNum {
   
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: PingFangSC;
  background-size: 100% 100%;
}
.el-container {
   
  height: 100%;
  width: 100%;
}

.el-main {
   
  width: 2000px;
  display: flex;
  .cback {
   
    white-space: nowrap;
    width: 1000px;
    height: 40%;
    .container {
   
      width: 100%;
    }
    .cleft {
   
      position: relative;
      vertical-align: top;
      display: inline-block;
      .menuUl_1 {
   
        flex-wrap: wrap;
        justify-content: center;
      }
      .menuUl_2 {
   
        flex-wrap: wrap;
      }
    }
    .cright {
   
      display: inline-block;
      vertical-align: top;
      position: relative;
    }
    .menuUl {
   
      width: 1000px;
      display: flex;
      flex-wrap: wrap;
      li {
   
        width: 28%;
        height: 200px;
        margin-top: 50px;
        margin-left: 20px;
        display: flex;
        padding-top: 40px;
        justify-content: space-around;
        background: orange;
        background-size: 100% 100%;
        border: #fff solid 1px;
        border-radius: 10%;
        .right {
   
          width: 55%;
          padding-right: 40px;
          margin-left: 70px;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          p {
   
            font-size: 34px;
            color: #162d58;
          }
          span {
   
            color: #69707d;
            font-size: 24px;
            margin-top: 20px;
          }
          i {
   
            color: #162d58;
          }