uniapp を使用してスクロール天井効果を実現する

<template>
  <view>
    <!-- 需要吸顶的元素 -->
    <view class="sticky" :style="stickyStyle">{{ text }}</view>
    
    <!-- 页面内容 -->
    <view class="content">
      <!-- 此处省略页面内容 -->
    </view>
    
    <!-- 占位元素 -->
    <view class="placeholder" v-show="showPlaceholder"></view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        text: '滚动吸顶效果',
        stickyStyle: '', // 吸顶元素的样式
        showPlaceholder: false // 是否显示占位元素
      }
    },
    onUnload() {
      // 当页面离开时，需要重置吸顶元素的样式
      this.stickyStyle = ''
    },
    onPageScroll(e) {
      // 监听页面滚动事件
      if (e.scrollTop > 100) {
        // 当滚动距离超过100时，设置吸顶元素的样式，使其固定在页面顶部
        this.stickyStyle = 'position: fixed; top: 0; left: 0; width: 100%; z-index: 999;'
        this.showPlaceholder = true
      } else {
        // 滚动距离不足100时，取消吸顶效果
        this.stickyStyle = ''
        this.showPlaceholder = false
      }
    }
  }
</script>

<style lang="scss">
  .sticky {
    /* 设置吸顶元素的样式 */
    height: 100px;
    line-height: 100px;
    text-align: center;
    background-color: #f5f7fa;
    color: #333;
  }
  
  .content {
    /* 设置内容容器的样式 */
    /* ... */
  }
  
  .placeholder {
    /* 设置占位元素的样式 */
    height: 100px;
  }
</style>