feat(index): 实现Header组件吸顶效果和轮播图触摸优化
- 添加Sticky组件实现Header吸顶功能 - 优化轮播图触摸事件,防止与页面滚动冲突 - 调整轮播图容器样式,确保手势操作流畅 - 更新Header组件结构以支持粘性布局 - 修复Banner组件中图片列表的key属性问题 - 移除不必要的状态传递和冗余代码
This commit is contained in:
@@ -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%;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user