<template> <van-sticky id="stickyID" ref="stickyRef" :offset-top="stickyOffsetTop"/> </template>
<script setup lang="ts"> const stickyOffsetTop = ref(); const stickyRef = ref(); const stickyID = ref(); onMounted(() => { const navBarHeight = parseInt( getComputedStyle(document.documentElement).getPropertyValue( "--van-nav-bar-height" ), 10 ); const searchPadding = parseInt( getComputedStyle(document.documentElement).getPropertyValue( "--van-search-padding" ), 10 ); const searchInputHeight = parseInt( getComputedStyle(document.documentElement).getPropertyValue( "--van-search-input-height" ), 10 ); const elementID = document.getElementById("stickyID"); const elementRef = stickyRef.value.$el.offsetHeight; stickyOffsetTop.value = navBarHeight + elementID.offsetHeight; console.log(elementID.offsetHeight); console.log(elementRef); }); <script>
使用vant css变量
<div style="display: flex; align-items: center; margin: 0"> <van-checkbox v-model="checked" :key="index" style="margin: 0" /> <p style=" { display: flex; margin: var(--van-card-padding); } " > 店铺名 > </p> </div>