我的客户详情页添加滚动筛选交互

src/baseComponents/useHeaderFixed.ts

@@ -0,0 +1,58 @@
+import { ref,onMounted, reactive } from "vue";
+// searchBarMinHeight   搜索栏的最小高度
+// scrollContainerDom  滚动容器
+// topHeaderDom  搜索栏容器
+// fixedWidth 悬浮搜索栏宽度
+// fixedTop  悬浮搜索栏具体顶部位置
+export function useHeaderFixed(scrollContainerDom,topHeaderDom,searchBarMinHeight=170,fixedWidth='calc(100% - 640px - 6px)',fixedTop='calc(293px + 20px)'){
+    const scrollMsg = reactive({
+        isScrollTop:false,    //搜索栏是否需要在滚动的时候固定到顶部
+        headerHeight: searchBarMinHeight+'px'  // 滚动时候的 高度占位 值
+    })
+
+    const HandleDomScroll = (e)=>{
+        console.log('监听到滚动了',e,topHeaderDom)
+
+            let positionAttr = topHeaderDom.value?.style?.position
+            if(e.target.scrollTop >= topHeaderDom.value.clientHeight){   //滚动高度 大于 搜索栏高度的时候 展示搜索浮窗
+
+                if(topHeaderDom.value.clientHeight > searchBarMinHeight){     //搜索栏的最小高度是  searchBarMinHeight
+                    //处于显示浮窗的滚动状态的同时，要保证 默认高度占位不被重置   
+                    // 搜索栏 变成浮动状态后 topHeaderDom.value.clientHeight 会 变小
+                    scrollMsg.headerHeight = topHeaderDom.value.clientHeight + 'px'
+                }
+                scrollMsg.isScrollTop = true
+
+                // 如果当前样式没变，不再重新设置
+                if(positionAttr !== 'fixed'){
+                    topHeaderDom.value.style.position = 'fixed'
+                    // 两 变量
+                    topHeaderDom.value.style.width = fixedWidth
+                    topHeaderDom.value.style.top = fixedTop
+                    topHeaderDom.value.style.zIndex = '10'
+                }
+            }else{
+                scrollMsg.headerHeight = topHeaderDom.value.clientHeight + 'px'
+
+                scrollMsg.isScrollTop = false
+                if(positionAttr !== 'relative'){
+                    topHeaderDom.value.style.position = 'relative'
+                    topHeaderDom.value.style.width = '100%'
+                    topHeaderDom.value.style.top = 'auto'
+                    topHeaderDom.value.style.zIndex = '10'
+                }
+            }
+    }
+
+    onMounted(async ()=>{
+        console.log('dom值',scrollContainerDom)
+        if(scrollContainerDom.value.clientHeight >= scrollContainerDom.value.scrollHeight){
+            // 没有滚动 —— 不需要显示头部查询
+            scrollMsg.isScrollTop = false
+        }
+        // 有滚动，——当滚动到头部被隐藏时候，显示横向固定滚动条
+        scrollContainerDom.value.addEventListener('scroll',HandleDomScroll)
+    })
+    return scrollMsg
+}
+

src/views/myCustomer/myCustomerDetail/customerStatusOverview/index.vue

@@ -25,13 +25,16 @@
 
         <!-- 中间：搜索与 我的跟进 -->
         <div class="center_panel">
-            <div class="page_content hide_scrollbar"> 
-                <!-- 滚动头部筛选展示 -->
-                <SelectSearch  @searchChange="HandleSearchChange"></SelectSearch>
-                <!-- 正常筛选展示 -->
-                <BlockSearch @searchChange="HandleSearchChange"></BlockSearch>
-               
-                <FollowCard v-if="finalRenderData?.length > 0" style="margin-top: 16px;" :cardList="finalRenderData">
+            <div class="page_content hide_scrollbar " ref="scrollDom"> 
+                <div v-if="scrollMsg.isScrollTop" :style="{height:scrollMsg.headerHeight || '176px'}"></div>
+                <div class="scroll_page" ref="headerDom">
+                    <!-- 滚动头部筛选展示 -->
+                    <SelectSearch v-if="scrollMsg.isScrollTop"  @searchChange="HandleSearchChange" ></SelectSearch>
+                    <!-- 正常筛选展示 -->
+                    <BlockSearch  v-else @searchChange="HandleSearchChange"></BlockSearch>
+                </div>
+                
+                <FollowCard v-if="finalRenderData?.length > 0" :cardList="finalRenderData">
                     <template #operation="{row}">
                         <div style="" class="table_row_option">
                             <!-- 没有取消的待办，显示取消按钮 -->
@@ -189,6 +192,7 @@ import {searchParams} from '@/components/MyCustomerHeaderSearch/commonVar'
 import SelectSearch from '@/components/MyCustomerHeaderSearch/SelectSearch/index.vue'
 import {myFollowSearchSelectList} from '@/components/MyCustomerHeaderSearch/SelectSearch/formSearchGroup'
 
+import { useHeaderFixed } from '@/baseComponents/useHeaderFixed'
 
 
 import SearchBlock from '@/baseComponents/SearchBlock.vue';
@@ -244,6 +248,11 @@ const props = defineProps({
 })
 const route = useRoute()
 
+const scrollDom = ref()
+const headerDom = ref()
+
+const scrollMsg  = useHeaderFixed(scrollDom,headerDom,176)  //搜索栏是否需要在滚动的时候固定到顶部
+
 /**
  * 1. 左侧数据展示
  */
@@ -971,4 +980,12 @@ onMounted( async ()=>{
         }
     }
 }
+
+
+.scroll_page{
+    background-color: white;
+    // background-color: rgb(229, 207, 207);
+    padding-bottom: 16px;
+}
+
 </style>