vue 左右滑动菜单_Vue实现左右菜单联动实现代码
本文介绍了Vue实现左右菜单联动实现代码吗,分享给大家,也给自己留个笔记,具体如下:
之前在外卖软件上看到这个左右联动的效果,觉得很有意思,所以就尝试使用 Vue 来实现,将这个联动抽离成为一个单独的组件,废话少说,先来一张效果图。
这个组件分为两个部分,1、左菜单;2、右菜单。 左菜单的 DOM 结构
class="left-menu"
:data="leftMenu"
ref="leftMenu">
class="left-item"
ref="leftItem"
:class="{'current': currentIndex === index}"
@click="selectLeft(index, $event)"
v-for="(item, index) in leftMenu"
:key="index">
{{item}}
右菜单的 DOM 结构
class="right-menu"
:data="rightMenu"
ref="rightMenu"
@scroll="scrollHeight"
:listenScroll="true"
:probeType="3">
- {{items.title}}{{item}}
这里是为了做 demo ,所以在数据上只是单纯捏造。
当然因为这是个子组件,我们将通过父组件传递 props ,所以定义 props
props: {
leftMenu: {
required: true,
type: Array,
default () {
return []
}
},
rightMenu: {
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)"
selectLeft (index, event) {
if (!event._constructed) {
return
}
let rightItem = this.$refs.rightItem
let el = rightItem[index]
this.$refs.rightMenu.scrollToElement(el, 300)
},
到这里我们就基本上完成了这些需求了
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
vue 左右滑动菜单_Vue实现左右菜单联动实现代码相关推荐
- element vue 纵向滑动条_Vue 部分
1.ES6+Vue : 1.Vue 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有 ...
- vue 调用移动录像_Vue 莹石摄像头直播视频实例代码
vue 莹石摄像头直播视频代码. html代码: 直播地址是调用接口获取的. export default { data(){ return{ player:"", rtmp_ur ...
- vue读取mysql数据_vue.js获取数据库数据实例代码
vue.js动态获取数据库数据 (通过vue.cli和webpack搭建的环境) 1.首先我先在创建一个静态的data.json文件,在static下创建json文件夹,(webpack环境下,静态的 ...
- vue 递归组件多级_Vue递归组件实现树形结构菜单
Tree 组件是递归类组件的典型代表,它常用于文件夹.组织架构.生物分类.国家地区等等,世间万物的大多数结构都是树形结构.使用树控件可以完整展现其中的层级关系,并具有展开收起选择等交互功能. 如图所示 ...
- vue 左侧菜单隐藏_vue.js 左侧二级菜单显示与隐藏切换的实例代码?
郎朗坤 废话不多说了,直接给大家贴代码了,完整代码: vue点击切换显示隐藏 {{item.name}} {{subItem.name}} 以上所述是小编给大家介绍的vue.js 左侧二级菜单显示与隐 ...
- vue怎么实现右键二级菜单_vue中如何自定义右键菜单详解
在所编辑的页面,需要添加右键菜单的元素,绑定contextmenu事件,如下: v-for="item in resourceList" :key="item.id&qu ...
- vue 递归组件多级_Vue 递归组件构建一个树形菜单
原标题:Vue 递归组件构建一个树形菜单 Vue.js 中的递归组件是一个可以调用自己的组件例如: Vue.component('recursive-component', { template: ` ...
- html折叠菜单列子,基于Vue.js+bootstrap4的左侧可伸缩式菜单
一.Vue.js简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...
- ABP +VUE Elment 通用高级查询(右键菜单)设计+LINQ通用类Expression<Func<TFields, bool>>方法
ABP +VUE Elment 通用高级查询(右键菜单)设计+LINQ通用类Expression 1. 目前需要用VUE实现源cs系统报表的右键菜单所有和自定义查询功能. 1.1 CS端的右键菜单效果 ...
最新文章
- 独家 | 展望未来:数据科学、数据工程及技术(附链接)
- 【HTTP协议】HTTP状态码列表大全
- linux/CentOS7安装MySQL(完整版)【笔记自用】
- 面试 Java 高级后端开发,要准备哪些知识点?
- 运行配置文件中指定类的指定方法
- 树莓派3显示服务器SSH拒绝了密码,脚本封杀尝试树莓派SSH密码的来源IP
- 项目管理论坛_【项目管理论坛】 第15期:如何做一名优秀的项目经理
- 730阵列卡支持多大硬盘_3分钟告诉你:OPPO Reno普通版和旗舰版的差距到底有多大...
- linux怎么同时运行多个程序吗,Linux配置多个tomcat同时运行
- 【Html】div 加载 html页面的方法
- python判断密码是否合法性_菜鸟使用python实现正则检测密码合法性
- 图及其应用实验报告 c语言,图的应用 实验报告
- 联通手机卡网速的修改
- JSON.stringify(value [, replacer] [, space])
- 集合框架-Comparator和Comparable的区别
- java解析word示例(支持docx、doc,wps格式)
- There appears to be a gap in the edit log. We expected txid 867311, but got txid 867402.
- Java 对象 、String 、JSON 互转
- 基于SPI协议下的OLED显示
- 955.WLB 不加班公司名单(持续更新)
热门文章
- Python中的注释和算数运算符
- 音视频技术开发周刊(第128期)
- IBM Cloud Video工程师Scott Grizzle谈流媒体协议和Codec
- Janus流媒体服务器信令分析
- sync.Map低层工作原理详解
- 前沿观察 | SageDB:一个自学成才的数据库
- 如何写一手好 SQL 【频繁出现慢SQL告警的优化方案】
- leetcode 111. 二叉树的最小深度
- Redis实战(八):面试常问:击穿,穿透,雪崩,分布式锁,API(jedis,luttce,springboot:low/high level)
- 【Java/JFrame/多线程】小球碰到边缘的回弹效果