Vant3 的 van-sticky 组件用于实现粘性布局,即当页面滚动时,某个元素会固定在页面的特定位置。以下是一个简单的例子,演示如何在 Vue 组件中使用 Vant3 的 Sticky:
<template>
  <div>
    <!-- 使用 van-sticky 组件 -->
    <van-sticky :offset-top="offsetTop">
      <div style="padding: 16px; background-color: #1989fa; color: #fff;">
        这是一个粘性布局
      </div>
    </van-sticky>

    <!-- 页面内容,用于撑开高度,使得滚动生效 -->
    <div style="height: 2000px;"></div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 距离顶部的偏移量,表示页面滚动多少距离后触发粘性效果
    const offsetTop = ref(0);

    return {
      offsetTop,
    };
  },
};
</script>

<style>
/* 这是一个简单的样式示例,你可以根据需求自定义样式 */
</style>

在上述代码中,我们使用了 van-sticky 组件,并通过 :offset-top 属性设置距离顶部的偏移量,表示页面滚动多少距离后触发粘性效果。在这个例子中,设置了 offsetTop 为 0,表示页面滚动到顶部时触发粘性效果。

需要注意的是,为了让页面滚动生效,我们在页面中添加了一个高度为 2000px 的元素。

你可以根据实际需求定制粘性布局的样式和行为。确保你的项目已经正确引入了 Vant3 并按照文档配置,以确保组件能够正常工作。


转载请注明出处:http://www.zyzy.cn/article/detail/5758/Vant