餐饮小程序开发的优点_Vue完成左右菜单联动完成

摘要: Vue完成上下莱单连动完成编码 本文关键详细介绍了Vue完成上下莱单连动完成编码,网编感觉挺好的,如今共享给大伙儿,也给大伙儿做下参照。一起追随网编回来看一下吧文中详...

Vue实现左右菜单联动实现代码       这篇文章主要介绍了Vue实现左右菜单联动实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

本文介绍了Vue实现左右菜单联动实现代码吗,分享给大家,也给自己留个笔记,具体如下:

源码传送门:

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

这个组件分为两个部分,1、左菜单;2、右菜单。 左菜单的 DOM 结构

 scroll
 :data="leftMenu"
 ref="leftMenu" 
 div 
 ref="leftItem"
 :class="{'current': currentIndex === index}"
 @click="selectLeft(index, $event)"
 v-for="(item, index) in leftMenu"
 :key="index" 
 p {{item}} /p 
 /li 
 /ul 
 /div 
 /scroll 

右菜单的 DOM 结构

 scroll
 :data="rightMenu" 
 ref="rightMenu"
 @scroll="scrollHeight"
 :listenScroll="true"
 :probeType="3" 
 div 
 li ref="rightItem" v-for="(items, i) in rightMenu" :key="i" 
 div 
 div {{items.title}} /div 
 div v-for="(item, j) in items.data" :key="j" {{item}} /div 
 /div 
 /li 
 /ul 
 /div 
 /scroll 

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

当然因为这是个子组件,我们将通过父组件传递 pro凡科抠图 ,所以定义 pro凡科抠图

pro凡科抠图: {
 leftMenu: {
 required: true,
 type: Array,
 default () {
 return []
 rightMenu: {
 required: true,
 type: Array,
 default () {
 return []
}

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

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

所以我们在右边菜单的 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)
},

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503