微信小程序页面向上滚动隐藏顶部菜单

实现效果为页面向上滚动隐藏顶部分类菜单,向下滚动则显示顶部菜单,效果图如下所示:

scroll.gif

圈点勾画:

1. 先获取菜单的高度, 用来判断是否超过了开始隐藏的高度;
2. 通过监听页面滚动函数 onPageScroll , 控制菜单的显示隐藏;
3. 距离页面顶部的高度未超过菜单高度, 则菜单一直显示, 并用data记录当前距离; 当距离顶部的高度超过菜单高度时, 把当前距离和记录的距离比较大小, 来判断是向上滚动屏幕还是向下.
4. 注意距离页面顶部的高度的理解, 页面向上滚动隐藏了部分, 但高度是存在的(重点理解);
5. menuAnim为菜单滚动动画.

奉上代码