Vue实现左右菜单联动实现

刘福发布于2019-08-23 10:56 / 2473人阅读

摘要：动态数据结构菜单数据是用户自定义增加一些内容，并渲染左菜单的结构右菜单的结构这里是为了做，所以在数据上只是单纯捏造。

知乎

个人博客

Github

源码传送门：Rain120/vue-study

根据掘金评论需求，更新了数据接口并修复了一些问题

之前在外卖软件上看到这个左右联动的效果，觉得很有意思，所以就尝试使用Vue来实现，将这个联动抽离成为一个多带带的组件，废话少说，先来一张效果图。

这个组件分为两个部分，1、左菜单；2、右菜单。

动态数据结构

menus: [
  {
    name: "菜单1",
    data: [
      {
        name: "1.1"
      },
      {
        name: "1.2"
      },
      {
        name: "1.3"
      },
      {
        name: "1.4"
      },
      {
        name: "1.5"
      },
      {
        name: "1.6"
      }
    ]
  }
]

data数据是用户自定义增加一些内容，并渲染DOM

左菜单的DOM结构


  
    
      
        {{menu.name}}

右菜单的DOM结构


  
    
      
        {{menu.name}}
        
          
            
              {{item.name}}

这里是为了做demo，所以在数据上只是单纯捏造。

当然因为这是个子组件，我们将通过父组件传递props，所以定义props

props: {
    menus: {
      required: true,
      type: Array,
      default () {
        return []
      }
    }
  },

在这个业务场景中，我们的实现方式是根据右边菜单滚动的高度来计算左边菜单的位置，当然左边菜单也可以通过点击来确定右边菜单需要滚动多高的距离，那么我们如何获得该容器滚动的距离呢？
之前一直在使用better-scroll，通过阅读文档，我们知道它有有scroll事件，我们可以通过监听这个事件来获取滚动的pos

if (this.listenScroll) {
  let me = this
  this.scroll.on("scroll", (pos) => {
    me.$emit("scroll", pos)
  })
}

所以我们在右边菜单的scroll组件上监听scroll事件

@scroll="scrollHeight"

method

scrollHeight (pos) {
  console.log(pos);
  this.scrollY = Math.abs(Math.round(pos.y))
},

我们将监听得到的pos打出来看看

我们可以看到控制台打出了当前滚动的pos信息，因为在移动端开发时，坐标轴和我们数学中的坐标轴相反，所以上滑时y轴的值是负数

所以我们要得到每一块li的高度,我们可以通过拿到他们的DOM

 _calculateHeight() {
  let lis = this.$refs.rightItem;
  let height = 0
  this.rightHeight.push(height)
  Array.prototype.slice.call(lis).forEach(li => {
    height += li.clientHeight
    this.rightHeight.push(height)
  })
console.log(this.rightHeight)
}

我们在created这个hook之后调用这个计算高度的函数

 _calculateHeight() {
  let lis = this.$refs.rightItem;
  let height = 0
  this.rightHeight.push(height)
  Array.prototype.slice.call(lis).forEach(li => {
    height += li.clientHeight
    this.rightHeight.push(height)
  })
  console.log(this.rightHeight)
}

当用户在滚动时，我们需要计算当前滚动距离实在那个区间内，并拿到他的index

computed: {
  currentIndex () {
    const { scrollY, rightHeight } = this
    const index = rightHeight.findIndex((height, index) => {
      return scrollY >= rightHeight[index] && scrollY < rightHeight[index + 1]
    })
    return index > 0 ? index : 0
  }
}

所以当前应该是左边菜单index = 1的菜单项active
以上是左边菜单根据右边菜单的滑动联动的实现，用户也可以通过点击左边菜单来实现右边菜单的联动，此时，我们给菜单项加上click事件

@click="selectLeft(index, $event)"

这里加上$event是为了区分原生点击事件还是better-scroll派发的事件

selectLeft (index, event) {
  if (!event._constructed) {
    return
  }
  let rightItem = this.$refs.rightItem
  let el = rightItem[index]
  this.$refs.rightMenu.scrollToElement(el, 300)
},

使用

到这里我们就基本上完成了这些需求了

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96836.html

VUE+element三级联动或树形菜单获取最后一项,并加入到表格中

摘要：如下图要实现的功能如下勾选三级联动的材料勾选最后一级的材料把勾选的材料信息动态添加到下面表格中数据三级联动数据材料键值对选中的材料从后台获取三级联动数据调用封装的函数把最后一项添加到函数中获取最后一级材料函数遍历材料树如果有下级材料就一直如下图,要实现的功能如下,勾选三级联动的材料,勾选最后一级的材料,把勾选的材料信息动态添加到下面表格中showImg(https://segment...

yeyan1996 2019-08-26 10:28 评论0 收藏0
关于Vue组件化开发的思考

摘要：因为觉得这个是在项目中最常用的功能，提取出来方便复用的才是组件然而我才发现这个想法是有问题的。联动思考悟缘起于最近的一个表单开发，页面上有个是联动菜单的选项。两个组件放在不同的板块内，相互独立，方便管理和维护。今天在家躺了一天，直到晚上才考虑清楚，当人没有明确目标的时候，太容易被环境影响了。目标需要切合实际，至于和实际之间的距离，取决于当前认知的正确和全面。既有认知（误）一般说到...

lemon 2019-08-26 11:34 评论0 收藏0
vue移动端侧滑面板组件

摘要：里边涉及到的指令是自定义的指令，为了处理移动端的点击操作，我还整理了一片陋文移动点击长按滑动指令然后这个组件的源码我放在了我出来的项目上谢谢各位品尝，以下这段都是废话，请跳过公司移动端开发平台进行了大变革，前端架构由DCloud大生态转换为VUE，所以移动端的UI组件库从MUI改为使用MintUI，然后开始大刀阔斧的把MintUI组件改成MUI组件的样子，然后发现少了几个较为常用的...

TNFE 2019-08-22 16:21 评论0 收藏0
慕课网饿了么 vue2.0 项目

饿了么 vue 项目总结项目效果预览 ele效果预览项目源码地址 ele源码跟着慕课网黄轶老师敲饿了么 vue 项目作者项目源代码地址项目完成之后 npm run build 这本来是写在最后面一段的，我现在把他写在了最前面，方便我们事先知道，整个项目做完之后是什么样子的项目完成之后在根目录下 npm run build （就是 npm run dev 的那个目录）会在根目录...

xuexiangjys 2019-08-20 18:10 评论0 收藏0
用Vue撸一个『A-Z字母滑动检索菜单』

摘要：最近用仿写途牛旅行遇到了这样的城市列表选择页面，花了些时间，用实现了一下并让它体验的接近安卓原生组件很多地方都会有这样的侧边栏字母列表菜单，可以滑动实现内容列表联动。最近用vue仿写途牛旅行APP 遇到了这样的城市列表选择页面，花了些时间，用Vue实现了一下并让它体验的接近安卓/IOS 原生组件很多地方都会有这样的侧边栏字母列表菜单，可以滑动实现内容列表联动。比如手机通讯录，城...

warnerwu 2019-08-23 10:57 评论0 收藏0