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

蔚落 2022-02-01 14:47 610阅读 0赞

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

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

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

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

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

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

HTML：

<scroll-view scroll-y style="height: 100vh;" bindscroll="scroll"  >
        //你的内容   根据tabbarFix控制css变成fixed
        <view class="tabbar {
       {tabbarFix ? 'tab-fixed' : ''}}">
        </view>
    </scroll-view>

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

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

效果如下

![20190514201403567.gif][]

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

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

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

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

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

[20190514201403567.gif]: /images/20220201/cc38417172fe4dbc988efeb00074a928.png
[onPullDownRefresh]: https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onpulldownrefresh
[onReachBottom]: https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onreachbottom
[https_developers.weixin.qq.com_miniprogram_dev_component_scroll-view.html]: https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
[vue]: https://blog.csdn.net/qq_40428678/article/details/88839518