uniapp搜索框吸顶

实现UniApp搜索框吸顶效果的方法

在UniApp中实现搜索框吸顶效果，可以通过CSS的position: sticky属性或监听页面滚动事件动态修改样式来实现。以下是两种常见方法：

方法一：使用CSS的position: sticky属性

<template>
  <view class="sticky-search">
    <view class="search-box">
      <!-- 搜索框内容 -->
      <input type="text" placeholder="搜索..." />
    </view>
    <!-- 页面其他内容 -->
  </view>
</template>

<style>
.sticky-search {
  position: relative;
}

.search-box {
  position: sticky;
  top: 0;
  z-index: 999;
  background-color: #ffffff;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>

方法二：通过监听滚动事件动态修改样式

<template>
  <view>
    <view :class="['search-box', isFixed ? 'fixed' : '']">
      <input type="text" placeholder="搜索..." />
    </view>
    <!-- 页面其他内容 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      isFixed: false,
      scrollTop: 0
    }
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop
    this.isFixed = e.scrollTop > 100 // 设置吸顶的阈值
  }
}
</script>

<style>
.search-box {
  padding: 10px;
  background-color: #ffffff;
  transition: all 0.3s;
}

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>

注意事项

• 使用position: sticky时，确保父容器没有设置overflow: hidden，否则会导致失效
• 在iOS设备上，position: sticky可能会有兼容性问题，建议添加-webkit-sticky前缀
• 动态修改样式的方法性能消耗较大，适合需要复杂逻辑控制的场景
• 吸顶元素通常需要设置较高的z-index值，确保能覆盖下方内容

优化建议

• 添加过渡动画使效果更平滑
• 考虑导航栏高度，避免搜索框被遮挡
• 在吸顶状态下可以适当缩小搜索框尺寸，节省屏幕空间
• 对于复杂页面结构，可能需要计算更精确的吸顶阈值