vue.js仿饿了么这种左右联动最后一项滚动不到怎么办

图片描述

如动态图所示,左侧菜单栏正常滚动,但到最后一个由于滚动高度并未达到右边商品的滚动高度,所以当前活跃的菜单栏是最后一个的时候会因为高度不够总是不能正常以高亮展示,右边滚动反馈到左边也是同理,都无法使最后一项菜单活跃


实际上不仅限于最后一个,,也就是说商品标签要过容器顶部左边才会改变当前的活跃索引,只要滚动到底,前几个标签高度不够,都会无法更新其活跃状态,不知表述是否清楚?,困扰了大半天了,求解决

阅读 4.1k
4 个回答

加个标识符如果是点的就优先级高点,以及换掉计算属性,用函数方法,方法中根据标识符判断是否需要计算scrollY, 点击设置索引时加个延迟 时间大于滚动动画,并在设置时及时把标识符回归原位,不影响滚动判断

高度不够就增加高度呗。
如果让我做的话,给右边容器加个padding-bottom,值嘛,就用容器高度 - 最后一块的高度 + N像素

思路应该是这样:
左侧菜单栏,点击时,应该总是加上高亮效果。
而不是只依靠右侧的滚动反馈。这样即便右侧滚动到了底部,点击左侧相应的菜单,依然是可以高亮的。
刚打开了饿了么app,也是这个实现思路。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题