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

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

scroll.gif

圈点勾画:

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

奉上代码

<view class='container'>
  <view class='fix-view' id='fix-view' animation='{{menuAnim}}'>
    <!-- 菜单template -->
    <template is='tabBar' data='{{...tab_config}}' />
  </view>
  <view class='story-list'>
    <view wx:for="{{storyList}}" wx:key="{{item._id}}">
      <!-- 列表item, 自行填充 -->
    </view>
  </view>
</view>

.fix-view {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 150;
}

.story-list {
  padding-top: 40px;
}

onLoad

  onLoad: function(options) {
    let that = this;
    wx.createSelectorQuery().select('#fix-view').boundingClientRect(function(rect) {
      //menuHeight = rect.bottom;
      that.setData({
        menuHeight: rect.bottom
      })
    }).exec()
  },

onPageScroll

  onPageScroll: function(event) {
    let scroll = event.scrollTop; //当前的距离顶部的高度
    let scrollTop = this.data.scrollTop;  //记录的距离顶部的高度
    let height = this.data.menuHeight;  //菜单的高度
    let show = this.data.showMenu;  //菜单的显示状态
    //是否超过开始隐藏的高度
    if (scroll > height) {
      if ((scroll < scrollTop) == show) { //超过高度时的上滑或下滑状态一致时
        this.setData({
          scrollTop: scroll
        })
      } else { //超过高度时的上滑显示和下滑隐藏
        let anim = wx.createAnimation({
          timingFunction: 'ease-in-out',
          duration: 200,
          delay: 0
        })
        anim.translateY(scroll < scrollTop ? 0 : -height).step();
        this.setData({
          scrollTop: scroll,
          showMenu: scroll < scrollTop,
          menuAnim: anim.export()
        })
      }
    } else {
      //小于menuHeight并且隐藏时执行显示的动画
      if (!show) {
        let anim = wx.createAnimation({
          timingFunction: 'ease-in-out',
          duration: 200,
          delay: 0
        })
        anim.translateY(0).step();
        this.setData({
          scrollTop: scroll,
          showMenu: true,
          menuAnim: anim.export()
        })
      } else {
        this.setData({
          scrollTop: scroll
        })
      }
    }
  },

最后编辑于：2020.09.25 00:00:36