uni-app实现滚动吸顶功能

1.获取滚动的距离，可以根据uni-app中滚动事件获取滚动的高度

data() {
    return {
        scrollTop: 0, // 获取页面滚动的高度
    }
},
// 利用uni-app中滚动事件监听滚动的高度
// 注意：这里获取的高度单位是px，因为uni-app中使用的都是响应式单位rpx，所以滚动距离需要用rpx转换成px
onPageScroll(e) {
    this.scrollTop = e.scrollTop 
}

2.设置样式

<view class="container">
    <view style="height: 300rpx">这是头部的内容</view>
    <view class="sticky-elem" :class="scrollTop > topHeight ? 'fixed' : ''">这是要吸顶的元素<view>
</view>

<style lang="scss" scoped>
.sticky-elem {
    position: relative;
    .fixed {
        position: fixed;
        top: 0;
        width: 100%;
    }
}
// 吸顶后，如果吸顶元素的下方也有元素，给下方元素一个padding-top: 吸顶元素高度
</style>

3.转换单位的API

uni.upx2px()  // 可将单位为rpx转换为px

由于需吸顶元素上面有个300rpx的元素，所以需要将rpx转换为px，即topHeight需要设置为uni.upx2px(300)

data() {
    return {
        topHeight: uni.upx2px(300), // 300也可适当减少一点，因为在模拟器上面，如果设置刚好300，会出现闪动的情况
    }
}

这种方式做吸顶需要兼顾兄弟元素，吸顶时，兄弟元素也需要跟随吸顶元素发生变动，所以也需要同步在吸顶元素的兄弟元素上加样式

如果有更好的方法做滚动吸顶，也可以评论区探讨一下~~