uni-app 实现类似腾讯新闻吸顶效果

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

uni-app 实现类似腾讯新闻吸顶效果

类似腾讯新闻吸顶效果，比如当中间有个模块滑动到与头部下面的时候，自动吸顶，不带卡顿的或动画闪烁的；

Harmonyos Next教程
11 回复

css粘性定位position：sticky 了解一哈


position：sticky 属性我测试过，ios没什么问题，安卓机就不行

回复 3***@qq.com: 我这边测的没啥问题 估计低版本会有兼容性问题吧

回复 秋凡: 比较追求完美，ios兼容性比较好，但是经过测试低端的安卓机体验效果就非常不好

回复 3***@qq.com: 哈哈 低端机还要啥自行车 市面上手机版本太多了 不可能全兼顾

回复 秋凡: 有能判断是否兼容sticky的方法吗，网上搜的都不能用。

回复 3***@qq.com: 我是直接放弃不兼容的了 最新的设备应该都没什么问题吧

回复 3***@qq.com: Android低端机可以引入x5内核解决

回复 DCloud_heavensoft: 安卓也已经可以了支持position：sticky，测试过了， 这个兼容安卓后体验非常好！

有的，市场搜吸顶。如果你需要吸顶后，可继续左右拖动长列表，那请参考hello uni-app模板里的swiper-list，从HBuilderX2.6.6+起新建项目选择的hello uni-app模板带有该功能，是nvue实现的。

在 uni-app 中实现类似腾讯新闻的吸顶效果，可以通过使用 scroll-view 组件监听滚动事件，结合 CSS 的 position: sticky 或者动态设置元素的 position 和 top 属性来实现。以下是一个简单的示例代码，展示了如何实现这一效果。

1. 模板部分

<template>
  <view class="container">
    <scroll-view
      scroll-y="true"
      @scroll="onScroll"
      class="scroll-view"
    >
      <view class="header" :style="headerStyle">
        <!-- 吸顶内容，例如新闻标题栏 -->
        <text>新闻标题栏（吸顶效果）</text>
      </view>
      <view class="content">
        <!-- 模拟内容，使用多个view模拟长列表 -->
        <view v-for="(item, index) in contentList" :key="index" class="content-item">
          {{ item }}
        </view>
      </view>
    </scroll-view>
  </view>
</template>

2. 脚本部分

<script>
export default {
  data() {
    return {
      scrollTop: 0,
      headerStyle: {
        position: 'relative', // 初始位置
        top: '0'
      },
      contentList: Array.from({ length: 50 }, (_, i) => `内容 ${i + 1}`)
    };
  },
  methods: {
    onScroll(event) {
      this.scrollTop = event.detail.scrollTop;
      this.updateHeaderStyle();
    },
    updateHeaderStyle() {
      if (this.scrollTop > 50) { // 假设头部高度为50px，当滚动超过50px时吸顶
        this.headerStyle = {
          position: 'fixed',
          top: '0',
          width: '100%',
          zIndex: 999 // 确保头部在其他内容之上
        };
      } else {
        this.headerStyle = {
          position: 'relative',
          top: '0'
        };
      }
    }
  }
};
</script>

3. 样式部分

<style scoped>
.container {
  padding-top: 50px; /* 确保内容不被初始的头部遮挡 */
}
.scroll-view {
  height: 100vh; /* 使scroll-view占满整个视口高度 */
}
.header {
  background-color: #fff; /* 头部背景色 */
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}
.content {
  padding: 10px;
}
.content-item {
  margin-bottom: 10px;
  padding: 10px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}
</style>

以上代码展示了如何在 uni-app 中通过监听滚动事件动态设置元素的 position 和 top 属性，实现类似腾讯新闻的吸顶效果。这种方法比较通用，适用于多种场景。

回到顶部