小程序上滑展示下滑隐藏导航

需求: 最终实现效果为页面向上滚动隐藏顶部分类菜单,向下滚动则显示顶部菜单
实现方法参考网上的方式自己改了一下

html

<view id="fix-view" animation='{{menuAnim}}'></view>

css

#fix-view {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  background-color: #fff;
}

使用方法

  // 页面加载
  onLoad(options) {
    onScrollDom('#fix-view',this)
  },
  /**
   * 生命周期函数--页面滚动
   * @param event 滚动对象信息
   */
  onPageScroll: function (event) {
    onScrollWindow(event,this)
  },

封装后的方法


/**
 * 滚动元素高度
 * @param id 元素选择器
 * @param self 绑定this对象
 */
const onScrollDom = (id,self,options={}) =>{
  wx.createSelectorQuery().select(id).boundingClientRect(function(rect) {
    self.setData({
      menuHeight: options.height || rect.bottom
    })
  }).exec()
}
/**
 * 计算滚动距离
 * @param event 滚动元素
 * @param self 绑定this对象
 */
const onScrollWindow = (event,self) =>{
  let scroll = event.scrollTop; //当前的距离顶部的高度
  let scrollTop = self.data.scrollTop;  //记录的距离顶部的高度
  let height = self.data.menuHeight;  //菜单的高度
  let show = self.data.showMenu;  //菜单的显示状态
  //是否超过开始隐藏的高度
  if (scroll > height) {
    if ((scroll < scrollTop) == show) { //超过高度时的上滑或下滑状态一致时
      self.setData({
        scrollTop: scroll
      })
    } else { //超过高度时的上滑显示和下滑隐藏
      let anim = wx.createAnimation({
        timingFunction: 'ease-in-out',
        duration: 200,
        delay: 0
      })
      anim.translateY(scroll < scrollTop ? 0 : -height).step();
      self.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();
      self.setData({
        scrollTop: scroll,
        showMenu: true,
        menuAnim: anim.export()
      })
    } else {
      self.setData({
        scrollTop: scroll
      })
    }
  }
}

注意事项

如果存在fixed 嵌套fixed，会导致嵌套的fixed失效,原因是 transform 导致，提供一种解决方式,在一定触发条件下把 transform设置为空值代码

    // 兼容fixed嵌套fixed问题
    let anim = wx.createAnimation({
      timingFunction: 'ease-in-out',
      duration: 200,
      delay: 0
    })
    anim.translate('').step();
    this.setData({
      menuAnim:anim.export()
    })

小程序 上滑展示下滑隐藏导航

小程序上滑展示下滑隐藏导航