吸顶设计：为你的uni-app锦上添花

2024-01-07 13:18:07

吸顶设计，是一种常见的网页和移动端设计元素，它可以让特定元素在页面滚动时始终保持在顶部可见。在uni-app中，吸顶功能同样可以实现，为你的应用增添一抹亮色。

实现原理

要实现uni-app中的吸顶功能，需要遵循以下思路：

获取元素初始位置： 获取要吸顶的元素和基准元素相对于页面的初始距离。
监听页面滚动： 监听页面滚动事件，获取滚动的距离。
动态调整元素位置： 根据滚动的距离，动态调整要吸顶元素的位置。

代码实现

在uni-app中，可以使用Vue.js的mounted生命周期钩子和onPageScroll全局事件来实现吸顶功能。代码如下：

<template>
  <div ref="target">要吸顶的元素</div>
  <div ref="baseline">基准元素</div>
</template>

<script>
import { onMounted, onUnmounted } from 'vue'
import { onPageScroll } from '@uni/core'

export default {
  mounted() {
    // 获取元素初始位置
    this.targetTop = this.$refs.target.getBoundingClientRect().top
    this.baselineTop = this.$refs.baseline.getBoundingClientRect().top
    this.offset = this.targetTop - this.baselineTop
    
    // 监听页面滚动
    this.scrollHandler = onPageScroll((res) => {
      // 计算滚动的距离
      const scrollTop = res.scrollTop
      
      // 判断是否吸顶
      if (scrollTop >= this.baselineTop) {
        this.$refs.target.style.position = 'fixed'
        this.$refs.target.style.top = 0
      } else {
        this.$refs.target.style.position = 'static'
      }
    })
  },
  unmounted() {
    // 销毁监听器
    onUnmounted(this.scrollHandler)
  }
}
</script>