uni-app scroll-view 吸顶问题

发布于 1周前 作者 htzhanglong 来自 Uni-App

uni-app scroll-view 吸顶问题

项目信息 详情
产品分类 uniapp/App
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 13.6.6
HBuilderX类型 正式
HBuilderX版本号 4.26
手机系统 全部
手机系统版本号 Android 14
手机厂商 华为
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

测试过的手机

华为，小米，模拟器等，以及微信小程序等

示例代码：

position: sticky;  
top: 0;  
z-index: 9;

操作步骤：

如上

预期结果：

吸顶

实际结果：

滚动一段距离失效

bug描述：

css 的 position: sticky; 在 scroll-view 里面会失效，在页面级滚动中正常表现，只要放到scroll-view 里面就会出现滚动一段距离后失效的问题， 希望官方修复 position: sticky; 在 scroll-view 里面会失效的问题，否则吸顶就只能用js 方式控制，会很卡


Harmonyos Next教程
5 回复
<template> <view class="content"> <scroll-view class="scroll" scroll-y="true" > <view> <view class="box" v-for="item in 10">这个是普通内容 {{item}}</view> <view class="box sticky">我是吸顶内容</view> <view class="box" v-for="item in 30">这个是普通内容{{10+item}}</view> </view> </scroll-view> </view> </template> <script> export default { data() { return {} }, onReady() { }, methods: { } } </script> <style> .scroll { border: 1px blue solid; box-sizing: border-box; height: 500px; } .box { padding: 15px; border: 1px red solid; background-color: beige; } .sticky { position: sticky; top: 40px; background-color: #999; color: #fff; } </style>

试一试这段代码的吸顶是否生效 ？
注意：

sticky元素需要达到固定定位的位置。
为sticky元素设置位置参数，相反方向上sticky元素的外边界（margin or border or padding or content）到粘性约束元素的内边界（content）之间需要有元素，可以撑起一定的空间，供sticky元素固定定位使用。
粘性约束元素与滚动元素之间不能存在样式属性为overflow: hidden的元素。


谢谢，我套了 一层view 就可以用了

遇到同样问题很久了，希望官方能处理

麻烦官方看到回复下呀，问题很棘手，我认为scroll-view 应该跟weex 的list 一样提供一个 header 组件
或者就是修复 css position: sticky; 失效问题，

在处理uni-app中的scroll-view组件吸顶问题时，我们需要确保某个元素在滚动时始终保持在视口（viewport）的顶部。这通常通过动态调整元素的position和top样式属性来实现。以下是一个简单的示例代码，展示如何在uni-app中实现scroll-view内的吸顶效果。

示例代码

1. 页面模板（index.vue）

<template>
  <view class="container">
    <scroll-view scroll-y="true" @scroll="handleScroll" :scroll-with-animation="true" class="scroll-view">
      <view class="header" :style="headerStyle">
        <!-- 吸顶元素 -->
        <text>我是吸顶的Header</text>
      </view>
      <view class="content">
        <!-- 模拟长内容 -->
        <view v-for="i in 50" :key="i" class="item">
          内容 {{ i }}
        </view>
      </view>
    </scroll-view>
  </view>
</template>

2. 页面样式（index.vue中的<style>部分）

<style scoped>
.container {
  height: 100vh;
}
.scroll-view {
  height: 100%;
}
.header {
  width: 100%;
  background-color: #f8f8f8;
  padding: 10px;
  text-align: center;
  transition: top 0.3s;
}
.content .item {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ddd;
  text-align: center;
}
</style>

3. 页面脚本（index.vue中的<script>部分）

<script>
export default {
  data() {
    return {
      headerStyle: {
        position: 'relative',
        top: '0px'
      },
      scrollTop: 0
    };
  },
  methods: {
    handleScroll(e) {
      this.scrollTop = e.detail.scrollTop;
      if (this.scrollTop > 50) { // 假设header高度为50px
        this.headerStyle.position = 'fixed';
        this.headerStyle.top = '0px';
      } else {
        this.headerStyle.position = 'relative';
        this.headerStyle.top = `${this.scrollTop}px`;
      }
    }
  }
};
</script>

说明

  • 模板部分：包含一个scroll-view组件，用于垂直滚动。header元素是我们希望吸顶的部分，其内容会根据滚动事件动态调整样式。
  • 样式部分：定义了基本的样式，包括header和content的样式。
  • 脚本部分：通过监听scroll事件，根据滚动位置动态调整header的position和top样式属性，以实现吸顶效果。

这种方法通过监听滚动事件和动态调整样式，实现了在uni-app中scroll-view组件内的元素吸顶效果。

回到顶部