feat(index): 实现Header组件吸顶效果和轮播图触摸优化

- 添加Sticky组件实现Header吸顶功能
- 优化轮播图触摸事件,防止与页面滚动冲突
- 调整轮播图容器样式,确保手势操作流畅
- 更新Header组件结构以支持粘性布局
- 修复Banner组件中图片列表的key属性问题
- 移除不必要的状态传递和冗余代码
This commit is contained in:
2025-10-03 01:21:19 +08:00
parent 5270cab7e9
commit aa879f0062
6 changed files with 106 additions and 63 deletions

View File

@@ -18,3 +18,29 @@ page {
height: 70px;
}
}
/* 轮播图容器样式,确保不阻止页面滚动 */
.banner-swiper-container {
touch-action: pan-y !important;
.nut-swiper {
touch-action: pan-y !important;
pointer-events: none; // 关键修改禁用Swiper的指针事件
.nut-swiper-item {
touch-action: pan-y !important;
pointer-events: none; // 关键修改禁用Swiper Item的指针事件
image {
pointer-events: auto; // 重新启用图片的指针事件,以便点击功能正常
}
}
}
}
/* 吸顶状态下的样式 */
.nutui-sticky--fixed {
.header-bg {
height: 100%;
}
}