微信小程序---实现吸顶的效果

最新推荐文章于 2023-06-06 16:14:14 发布

原创最新推荐文章于 2023-06-06 16:14:14 发布 · 8.6k 阅读

9 ·

CC 4.0 BY-SA版权

小程序专栏收录该内容

12 篇文章

订阅专栏

需求:当用户进行页面的滚动操作,大于一定高度的时候实现吸顶

1.页面初始时获取需要吸顶的元素距离顶部的高度
onload()或onshow()中均可以实现

      let me = this;
      //获取tab的距离顶部高度
      const query = wx.createSelectorQuery();
      query.select('#tab').boundingClientRect(function (res) {
        // console.log(res.top)
          me.data.tabTop = res.top
      }).exec();

2.监听用户滚动行为

    onPageScroll:function(e){
        let me = this;
        //tab的吸顶效果
      console.log(e.scrollTop > me.data.tabTop)
        if(e.scrollTop>me.data.tabTop){
            if(me.data.tabFix){
                return
            }else{
                me.setData({
                    tabFix:'Fixed'
                })
            }
        }else{
            me.setData({
                tabFix:''
            })
        }
    },

3.wxss样式

.Fixed{
    position: fixed;
    top: 0;
    margin-top: 0;
    z-index: 99999;
}

4.页面布局

<scroll-view scroll-x="true" class="tab {{tabFix}}"  id="tab" scroll-into-view="{{intoView}}">
</scroll-view>