Vue 实现左右联动（超详细！！！！）

这篇文章的中心思想呢，就是通过一个变量(flagShow)来控制两个盒子的显示与隐藏（一个是“红框”，另一个是“绿框”）,下面我会把重要的部分写在代码的注释上，大家要细心看哦，我们先看一下整体的效果图：

效果演示

第一步：先来理顺一下结构，为什么要把它放在最上面呢？因为这个功能与结构的布局还是挺关键的

<div class="classify-wrapper"><div class="left"></div> // 左边那一栏<div class="right" ref="scroll" @scroll="handleScroll"> // 右边那一栏滚动区域<div class="top-fixed-title fixed-title" v-show="!flagShow"></div> // 主要！！！标题fixed吸顶(红色区域)<div class="main-content" v-for="(item, index) in listData" :key="index"> // 右边的每一个模块<div class="top-title" ref="rightTit">{{item.name}}</div> // 正常的标题(蓝色区域)<div class="bottom-content"></div> // 内容部分(就是上面图片下面标题的部分)<div class="fixed-title" v-show="flagShow && index == currentIndex - 1"></div> //  主要！！！原来的吸顶部分现在随着文档流向上滚动(绿色区域)</div></div>
</div>

第二步：参照上面的结构来看看具体的实现逻辑

1. 定义的变量

data() {listData: [],       // 接口获取到的总数据listHeight: [],     // 存放右边模块内容的高度scrollY: 0,         // 右边滚动时的scrollToprightTitHeight: 0,  // 右边模块标题的高度currentIndex: 0,    // 用于判断左边的高亮以及右边标题的内容显示flagShow: false,   // 控制吸顶的标题 和 不吸顶的标题（显示与隐藏）
}

2. 先把右边每一模块的高度放到一个数组中

getBoxHeight() {let rightTitHeight = this.rightTitHeight = this.$refs.rightTit.length ? this.$refs.rightTit[0].offsetHeight: 0;let rightItems = this.$refs.scroll.getElementsByClassName("main-content"); //获取指定类名的所有元素let height = 0;this.listHeight.push(height);for (let i = 0; i < rightItems.length; i++) {let item = rightItems[i]; // 右边的每一个模块（蓝色标题 + 标题下面所带的内容）height += item.clientHeight;this.listHeight.push(height - rightTitHeight); // 把右边模块内容的高度全都放到一个数组中}this.listData.forEach((item, index) => {// 把上面弄的那些高度分别放入总数据中，方便点击左边让右边滚动到所对应的模块this.$set(item, "distance", this.listHeight[index]); });}

3. 滚动的时候判断是否显示影藏那两个标题（红框与绿框）

this.scrollY >= start：当滚动的scrollTop到达顶部吸顶红框与蓝框的交界处（也就是大于右边模块内容的高度）

this.scrollY < end：当滚动的scrollTop小于（右边模块内容的高度加上右边模块标题的高度）

handleScroll() {this.scrollY = this.$refs.scroll.scrollTop; // 先获取滚动元素的scrollTop，主要用它来进行判断for (let i = 0; i < this.listHeight.length; i++) {let start = this.listHeight[i + 1]; // 右边模块内容的高度let end = this.listHeight[i + 1] + this.rightTitHeight; // 右边模块内容的高度 加上 右边模块标题的高度if (this.scrollY >= start && this.scrollY < end) {this.flagShow = true; // 当满足条件时，红色区域隐藏，绿色区域显示this.currentIndex = i + 1;return;}this.flagShow = false; // 默认红色区域定位在顶部}},

4. 点击左边标题联动右边

通过scrollTop来让右边区域随着左边的点击而联动

changeModel(index) {this.$refs.scroll.scrollTop = this.listData[index].distance + this.rightTitHeight;this.currentIndex = index;
}

第三步：结合上面所说，来看一下样式部分

.classify-wrapper {width: 100%;height: 100vh;background: #f7f7f7;.left {width: 111px;height: 100%;overflow-y: auto;-webkit-overflow-scrolling: touch;}.right {position: relative;flex: 1;width: 100%;height: 100%;background: #fff;overflow-y: auto;-webkit-overflow-scrolling: touch;.top-fixed-title { // !!!重要  红色区域position: fixed !important;top: 0 !important;z-index: 999 !important;background: #f00 !important;}.fixed-title { // !!!重要 绿色区域position: absolute;bottom: 0;z-index: 999;width: 249px;height: 45px;background: #0f0;}.main-content {position: relative;width: 100%;height: 100%;.top-title {height: 45px;background: #00f; // !!! 重要 蓝色区域}}}
}

以上就是这节的全部内容，欢迎各位大佬在下方评论区提问，如有不足，还望多多指教

Vue 实现左右联动（超详细！！！！）相关推荐

vue学习笔记（超详细）
文章目录一. Vue基础认识Vue.js Vue安装方式 Vue的MVVM 二. Vue基础语法生命周期模板语法创建Vue, options可以放什么语法综合 v-on v-for遍历数 ...
vue+webpack搭建项目超详细教程
在使用vue-cli之前,请确认你的电脑已经安装了 node,建议版本在 8.0.0 以上安装淘宝镜像(强烈推荐安装,不然真的好慢,等到最后还是失败) 安装cnpm的原因:npm的服务器是外国的,所 ...
Springboot+Vue整合笔记【超详细】
| 作者:江夏 | 微信公众号:1024笔记 | 知乎:https://www.zhihu.com/people/qing-ni-chi-you-zi-96 | GitHub:https://gith ...
vue中使用vuex(超详细)
vuex是使用vue中必不可少的一部分,基于父子.兄弟组件,我们传值可能会很方便,但是如果是没有关联的组件之间要使用同一组数据,就显得很无能为力,那么vuex就很好的解决了我们这种问题,它相当于一个公 ...
Vue vscode 创建 vue 项目流程【超详细】
文章目录一.安装node 二.配置淘宝镜像三.配置 vscode(win10) 四.全局安装脚手架五.创建项目六.进入项目七.项目结构一.安装node 请在官网下载安装:https://n ...
基于哔哩哔哩王红元（coderwhy）老师Vue学习课程的超详细学习笔记以及代码示例
开发工具:webstrom / VSCode 开发环境安装与配置:https://blog.csdn.net/qq_44068659/article/details/120293883 笔记: 定义变 ...
Vue如何自定义组件?超详细Vue自定义组件指南!使用自定义组件减少重复造轮子! ∠( °ω°)／前端知识
文章目录使用意义基础使用给组件添加属性传递事件自定义组件的v-model 剖析v-model原理使用示例插槽使用意义有时候一组HTML代码可能会在多出使用(比如页眉页脚).如果我们把 ...
vue自定义组件（超详细）
一.局部引入步骤 1.先将组件写好,放在一个文件中组件的写法和正常的.vue文件相同,如果需要接收参数,可使用props传值,以封装一个标题组件举例. 以下为项目目录以下为组件内容 <te ...
超详细版本vue+capacitor（自定义capacitor插件）编写移动端应用
人生苦短,我们要: 我的环境 Node v16.13.0 npm v8.1.0 mac的话需要安装Xcode windows的话需要Java 8 JDK和Android Studio软件本文以安卓开 ...
Vue模仿todo超详细讲解（附源码）
Vue模仿todo超详细讲解(附源码) 一.todo基本DOM结构二.todo功能需求分析 1.新增任务 2.点击变成完成状态 3.点击删除 4.双击进入编辑以及修改保存 5.底部的状态筛选 6.l ...

Vue 实现左右联动（超详细！！！！）

第一步：先来理顺一下结构，为什么要把它放在最上面呢？因为这个功能与结构的布局还是挺关键的

第二步：参照上面的结构来看看具体的实现逻辑

1. 定义的变量

2. 先把右边每一模块的高度放到一个数组中

3. 滚动的时候判断是否显示影藏那两个标题（红框与绿框）

4. 点击左边标题联动右边

第三步：结合上面所说，来看一下样式部分

Vue 实现左右联动（超详细！！！！）相关推荐

最新文章

热门文章