最近做小程序的时候,产品提了一个需求:
1.左侧的菜单栏和右侧的菜单可分别滚动,滚动左侧不影响右侧,滚动右侧左侧随之联动高亮显示所在的菜单分类。
2.点击下方左侧导航菜单栏,高亮显示被点击的菜单分类,右侧分类类别滚动到右侧顶部(类似于 HTML 里的锚点功能)。
3.滚动右侧菜品分类详情时,当该分类详情模块顶部接触到滚动区域的顶部,左侧对应的导航菜单栏高亮,并且显示在可视区域。
因为之前用vue做过一次这个效果,用了better-scroll,在小程序中不支持。于是上网开始找资料。
过程踩了很多坑,这里不一一说了,直接说实现(PS:我用的是mpvue框架):
html部分:使用scroll-view组件,不了解的可以去看官方文档scroll-view
左侧的部分基本代码实现:
右侧的代码基本实现:
接下来是JS部分
思路:
1.首先获取左侧的菜单和右侧的分类类别的高度,使用wx.createSelectorQuery().selectAll
2.将右边的每个类别的高度获取后,将高度累加,形成一个区间
3.左侧点击实现,利用scroll-into-view实现类似于锚点的效果,然后利用scroll-top的属性是左侧高亮的部分始终保持在视图区。因为scroll-into-view会引起右边的滑动,所以利用checkFlag限制右侧的scroll事件函数的执行。
4.右侧的实现,如上所说,利用checkFlag限制右侧的scroll事件函数的执行。然后进入循环,根据scroll事件里面的scrollTop的高度与获取的右侧分类的高度区间的值进行比对,记录index的值,然后高亮显示左侧,并且左侧上滑对应的距离,保证左侧高亮在可视区域。
以上是左右联动的基本实现,如有bug和可以改进的地方,敬请指正,不胜感激!