uniapp上滑更改头部-猿码集

uniapp上滑更改头部

在开发uniapp项目时，我们可能会遇到需要在页面上滑动时，动态更改页面头部的需求。这种需求在实际开发中很常见，比如说在列表页面上滑动时将原本的顶部导航栏替换成搜索栏。本文将介绍如何在uniapp中实现这种效果。

Step 1：监听页面滚动事件

首先，我们需要在页面中监听 scroll 事件。在 uniapp 中，可以使用 $refs 获取到页面的滚动元素，然后在 mounted 钩子函数中给该元素绑定 scroll 事件：


mounted() {
  this.$nextTick(() => {
    const scrollElement = this.$refs.scrollElement
    scrollElement.addEventListener('scroll', this.handleScroll, false)
  })
},
methods: {
  handleScroll(event) {
    // TODO
  }
}

在 handleScroll 方法中，我们将实现头部动态变化的逻辑。

Step 2：获取页面滚动距离

当用户滑动页面时，我们需要获取页面的滚动距离。可以通过 event.target.scrollTop 获取到滚动元素的滚动距离。


handleScroll(event) {
  const scrollTop = event.target.scrollTop
  console.log(scrollTop)
}

这里将滚动距离打印在控制台上，方便调试。

Step 3：动态修改头部

根据页面滚动距离的变化，我们可以实现动态更改头部的效果。这里以替换顶部导航栏为例。

首先，在模板中定义两个头部，一个普通状态的头部，一个被替换的头部。并使用 v-if 控制它们的显示状态。


<template>
  <div>
    <div class="normal-header" v-if="showNormalHeader">
      <h1>普通头部</h1>
    </div>
    <div class="fixed-header" v-else>
      <h1>固定头部</h1>
    </div>
    <div class="scroll-container" ref="scrollElement">
      <p></p>
      <p></p>
      <p></p>
      <p></p>
    </div>
  </div>
</template>

接下来，在 handleScroll 方法中使用 scrollTop 计算是否需要将头部替换成固定头部，并更新 showNormalHeader 的值。


handleScroll(event) {
  const scrollTop = event.target.scrollTop
  if (scrollTop >= 100) {
    this.showNormalHeader = false
  } else {
    this.showNormalHeader = true
  }
}

这里的 100 表示滚动距离大于等于 100 时，触发头部的替换

完整代码

请参考以下完整代码：


<template>
  <div>
    <div class="normal-header" v-if="showNormalHeader">
      <h1>普通头部</h1>
    </div>
    <div class="fixed-header" v-else>
      <h1>固定头部</h1>
    </div>
    <div class="scroll-container" ref="scrollElement">
      <p></p>
      <p></p>
      <p></p>
      <p></p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      showNormalHeader: true // 是否显示普通头部
    }
  },
  mounted() {
    this.$nextTick(() => {
      const scrollElement = this.$refs.scrollElement
      scrollElement.addEventListener('scroll', this.handleScroll, false)
    })
  },
  methods: {
    handleScroll(event) {
      const scrollTop = event.target.scrollTop
      if (scrollTop >= 100) { // 当滚动距离大于等于 100 时，显示固定头部
        this.showNormalHeader = false
      } else {
        this.showNormalHeader = true
      }
    }
  }
}
</script>

总结

以上就是在uniapp中实现页面滑动时动态更改头部的方法。通过监听页面 scroll 事件，获取页面滚动距离，我们可以很方便地实现该效果。对于其他场景下动态更改页面头部的情况，可以参考类似的实现逻辑。

uniapp上滑更改头部