小程序制作吸顶菜单（监听滚动条）

1.使用onPageScroll()函数监听滚动条

  onPageScroll(e){
  //参数e会返回滚动条滚动的高度
   console.log(e)
    if(e.scrollTop > 300){ }else { }
  },

由这个方法可以监听滚动条变化做到需要改变的状态

但是效果并不是很好，在编辑器上可能看不出效果，真机上效果很差，有很大的延迟（猜想可能是做的setData操作）滑动较慢没多大反应，但是划很快就很容易体现出来

 

2.（推荐使用）使用scroll-view 组件 的 bindscroll 事件

首先我们把所有内容放到scroll-view组件中

HTML：

    //你的内容   根据tabbarFix控制css变成fixed
    
    

JS：

onLoad(){
    var that = this;
    //会获取.tabbar到最上面的距离(就是我菜单的class)
    var query = wx.createSelectorQuery().select('.tabbar').boundingClientRect(res => {
      that.setData({
        fixTop: res.top,
      })
    }).exec();
},


 //scroll-view 组件 中的  bindscroll 绑定的滚动事件
 scroll(e){
    if (e.detail.scrollTop >= this.data.fixTop) {
      this.setData({
        tabbarFix: true
      })
    } else {
      this.setData({
        tabbarFix: false
      })
    }
  },

这种方式是个人暂时处理的，感觉还不错体验也可以

效果如下

如果有更好的办法欢迎评论交流。

补充：上面这种方式用scroll-view包裹不触发 上拉下拉  onPullDownRefresh，onReachBottom

但是可以使用scroll-view   中的  upper-threshold   lower-threshold代替

地址：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

推荐最全面的vue和微信小程序的区别