Vue 左右侧联动滚动的实现代码
以下是对 Vue 左右侧联动滚动的实现代码的知识点总结:
一、实现功能:
1. 点击左侧菜单,右侧滚动到相应位置
2. 滚动右侧,左侧滚动到相应位置
二、布局结构:
1. 使用 Better-Scroll 库实现滚动功能
2. 在 `<scroll>` 组件中添加 class='foods-wrapper' 属性
3. 在 `<ul>` 元素上初始化滚动功能
三、技术要点:
1. `<scroll>` 组件对紧邻的元素生效,如 `<scroll class='foods-wrapper'>`
2. 当 `foods-wrapper` 的高度小于内容高度时,才会发生滚动
3. 点击左侧菜单列表时,只需要计算右侧对应的偏移距离或计算对应的移动到的元素即可
四、实现方法:
方法一:计算移动距离,用 `scrollTo()` 方法
* 在点击左侧菜单时,计算右侧对应的偏移距离
* 使用 `scrollTo()` 方法滚动到对应的位置
方法二:计算移动到的元素,用 `scrollToElement()` 方法
* 在点击左侧菜单时,计算右侧对应的元素
* 使用 `scrollToElement()` 方法滚动到对应的元素
五、滚动右侧列表时:
1. 需要知道滚动的元素在哪个 item 列表区间
2. 计算右侧五组 item 距离顶部的距离 `_heightArr()`
3. 监听滚动距离,使用 `listenScroll` 和 `probeType` 参数
4. 在 `created()` 生命周期中定义 `listenScroll` 和 `probeType` 参数
5. 使用 `@scroll=scroll` 代理方法监听滚动距离
六、实时监听滚动距离:
1. 在 `data()` 中定义 `scrolly` 变量
2. 监听 `scrolly` 变化,使用 `watch` 监听器
3. 在 `scrolly` 变化时,更新 `currentIndex` 变量
七、左侧结构:
1. 使用 `<scroll>` 组件实现左侧滚动功能
2. 在 `<ul>` 元素上添加 `v-for` 指令,遍历 `foodsList` 数组
3. 使用 `:class` 指令添加活动样式
八、结论:
通过使用 Better-Scroll 库和 Vue 框架,可以轻松实现左右侧联动滚动的功能。本文提供了两种实现方法,分别是计算移动距离和计算移动到的元素。同时,文章还提供了实时监听滚动距离的方法,可以实时更新左侧菜单的活动状态。