【分享】微信小程序下拉显示菜单栏上拉隐藏代码

wxml

<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>

wxss

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

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

js部分

scrollTop:null,
showMenu:true,
menuAnim:null,
menuHeight:null

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
	        })
	      }
	    }
	  }

来源：简书：beatzcs