顶部吸附

src/pages/index/listFood.vue

@@ -9,7 +9,7 @@
     ></search>
     <view class="head">
       <view class="top" :style="{ backgroundImage: topBg }"></view>
-      <view class="bootom">
+      <view class="bootom" :style="{ top }">
         <view class="bootom-top">
           <view class="option" @tap="locationFiltering(0)">
             <text :class="{ rotate: rotate }">全部烧烤烤肉</text>
@@ -98,6 +98,7 @@ const cardData = ref([]);
 const backgroundBox = ref('');
 const backIcon = ref('white');
 const title = ref('');
+const top = ref(null);
 let total;
 const paramsId = {
   parentId: null,
@@ -116,11 +117,20 @@ onLoad((options) => {
   const { categoryId, place } = options;
   paramsId.parentId = categoryId;
   getByParentIdData();
+  getTop();
   getByType({ place }).then((res) => {
     topBg.value = `url(${import.meta.env.VITE_APP_IMG_URL + res.data[0].imgUrl})`;
   });
 });
 
+// 获取位置板块贴合高度
+const getTop = () => {
+  xma.xh.getMenuButtonBoundingClientRect({
+    success(res) {
+      top.value = (res.top + res.bottom) / 2 + 25 + 'px';
+    },
+  });
+};
 const refresh = () => {
   delete listParams.distance;
   delete listParams.area;
@@ -295,7 +305,7 @@ page {
     justify-content: space-around;
     border-radius: 6rpx;
     background: #ffffff;
-    position: relative;
+    position: sticky;
     .bootom-top {
       display: flex;
       align-items: center;