<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