微信小程序实现吸顶功能

最新推荐文章于 2024-02-03 18:04:36 发布

为什么名字都被占用

最新推荐文章于 2024-02-03 18:04:36 发布

阅读量786

点赞数

分类专栏：小程序前端其他文章标签：吸顶微信小程序吸顶

本文链接：https://blog.csdn.net/qq_37588752/article/details/103715638

版权

前端其他同时被 2 个专栏收录

81 篇文章 1 订阅

订阅专栏

小程序

41 篇文章 1 订阅

订阅专栏

1.data中定义两个变量

// 吸顶
        fixTop: 0,//头部查询条件的高
        scrollTop: 0,

2.onShow中添加方法this.boundingClientRect()

onShow() {
       
        this.boundingClientRect()
    },

3.boundingClientRect方法

// 实现菜单吸顶
    boundingClientRect() {
        let query = wx.createSelectorQuery();
        query.select('.list-search').boundingClientRect(res => {
            this.setData({
                fixTop: res.top,
            })
        }).exec()
    },
//监测页面滚动
    onPageScroll: function (e) {
        this.setData({
            scrollTop: e.scrollTop
        });
    },