之前做项目的时候遇到一个问题,当时把他记录到有道云笔记上了,现在把他分享到博客上,希望能够给遇到同样问题的大家一点小小的帮助。做一个外卖的项目的时候,商家信息哪一个组件,如何实现滑动右侧列表,更新当前分类,并且点击某个分类项目,右侧列表滑动到对应位置?
分析:
当前分类
当滑动右侧列表时,更新当前分类
点击某个分类项,右侧列表滑动到对应位置
类名:current 当前标识
设计一个计算属性:currentIndex
根据哪些数据计算?
scrollY:右侧滑动的Y轴坐标(滑动过程t实时变化)
tops:所有右侧分类li的top组成的数组 (列表第一次显示后就不变了)
步骤:
1、在滑动的过程中,实时收集scrrollY
2、列表第一次显示后,收集tops
3、实现currentIndex的计算逻辑
总结: current 标识当前分类,设计一个计算属性currentIndex,根据scrollY(右侧滑动的Y轴坐标)和tops(所有右侧分类li的top组成的数组 => 列表第一次显示后就不变了),在列表滑动过程中,实时收集scrollY,列表第一次显示后,收集tops,实现currentIndex的计算逻辑。
(1)实现回弹滑动,列表来回滑动:在action.js中添加一个回调函数,在组件中进行应用,使用用 this.$nextTick&#x