<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.pingtaimeng.com/article/detail/5758/Vant