(●'◡'●)ノ
 
收藏文章 楼主

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

版块:经验教程   类型:普通   作者:小狼人   查看:2961   回复:0   获赞:0   时间:2020-09-01 22:51:02

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


data

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


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

赢得客户的认可,需要服务细节化 
回复列表
默认   热门   正序   倒序

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

Powered by HadSky 8.5.2

©2015 - 2025 爱宅域

加入官群 QQ咨询 友链展示 申请友链

您的IP:216.73.216.190,2025-07-01 09:09:28,Processed in 0.10564 second(s).

头像

用户名:

粉丝数:

签名:

资料 关注 好友 消息
已有0次打赏
(0) 分享
分享

请保存二维码或复制链接进行分享

取消