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值，确保能覆盖下方内容
优化建议
- 添加过渡动画使效果更平滑
- 考虑导航栏高度，避免搜索框被遮挡
- 在吸顶状态下可以适当缩小搜索框尺寸，节省屏幕空间
- 对于复杂页面结构，可能需要计算更精确的吸顶阈值
