diff --git a/src/components/lx-header/lx-header.vue b/src/components/lx-header/lx-header.vue
index 84e41be1203b701953f5b134fe25a1e049d807ae..866c9b719f4d6975bcc88d25fb0f0262c0d87fc6 100644
--- a/src/components/lx-header/lx-header.vue
+++ b/src/components/lx-header/lx-header.vue
@@ -8,7 +8,7 @@
  * @version: V1.0.2
  */
 import { goToPage } from '@/utils/util'
-import { ref, watchEffect, type CSSProperties } from 'vue'
+import { getCurrentInstance, type CSSProperties } from 'vue'
 // 引入tabbar
 import useTabbarInfo from '@/store/tabbar'
 
@@ -95,6 +95,16 @@ const goBack = () => {
         uni.navigateBack()
     }
 }
+onMounted(() => {
+    const query = uni.createSelectorQuery().in(getCurrentInstance())
+    query
+        .select('.header_box')
+        .boundingClientRect((data) => {
+            let newdata = JSON.parse(JSON.stringify(data))
+            tabbarInfo.setHeaderHeight(Math.round(newdata.height))
+        })
+        .exec()
+})
 </script>
 
 <template>
diff --git a/src/components/lx-tabbar/lx-tabbar.vue b/src/components/lx-tabbar/lx-tabbar.vue
index 4367d949fabfa6dc50c79fde853c2b6870301f27..1551f39e9f19427763ff07d0ae0a2bc6c1bd0df5 100644
--- a/src/components/lx-tabbar/lx-tabbar.vue
+++ b/src/components/lx-tabbar/lx-tabbar.vue
@@ -30,8 +30,18 @@ const menuClick = (item: menuListInt) => {
             <view class="name">{{ item.title }}</view>
         </view>
     </view>
+    <view class="lxx_tabbar_mark"></view>
 </template>
 <style lang="scss" scoped>
+// 填充高度
+.lxx_tabbar_mark {
+    /* 兼容 iOS < 11.2 */
+    padding-bottom: constant(safe-area-inset-bottom);
+    /* 兼容 iOS >= 11.2 */
+    padding-bottom: env(safe-area-inset-bottom);
+    padding-top: 10rpx;
+    height: 100rpx;
+}
 .lxx_main_tabbar {
     /* 兼容 iOS < 11.2 */
     padding-bottom: constant(safe-area-inset-bottom);
diff --git a/src/components/lx-tabs/lx-tabs.vue b/src/components/lx-tabs/lx-tabs.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9ca599eeaae1c8c444444517dce488b1ca70c10b
--- /dev/null
+++ b/src/components/lx-tabs/lx-tabs.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import useTabbarInfo from '@/store/tabbar'
+import { watchEffect } from 'vue'
+const tabbarInfo = useTabbarInfo()
+/*
+ * @description:
+ * @fileName: lx-tabs.vue
+ * @params
+ * @author: lxx
+ * @date: 2023-11-20 10:38:16"
+ * @version: V1.0.0
+ */
+export interface LxTabItemInt {
+    title: string
+    id: number
+    [n: string]: string | number
+}
+interface LxTabInt {
+    list: LxTabItemInt[]
+}
+const props = withDefaults(defineProps<LxTabInt>(), {
+    list: () => {
+        return [
+            {
+                title: '标题一',
+                id: 0
+            },
+            {
+                title: '标题二',
+                id: 1
+            }
+        ]
+    }
+})
+const emit = defineEmits(['click'])
+// 选中的id
+const isActive = ref(0)
+watchEffect(() => {
+    isActive.value = props.list[0].id
+})
+const tabClick = (item: LxTabItemInt) => {
+    if (isActive.value === item.id) return
+    isActive.value = item.id
+    emit('click', item)
+}
+defineExpose({
+    isActive
+})
+// 粘性定位top-头部高度
+const tabsTop = ref(0)
+watchEffect(() => {
+    tabsTop.value = tabbarInfo.headerHeight
+})
+</script>
+<template>
+    <view class="tabs_box flex" :style="{ top: tabsTop + 'px' }">
+        <view class="tab_item flex" v-for="item in list" :key="item.id" :class="{ tab_active_weight: isActive === item.id }">
+            <text @click="tabClick(item)">{{ item.title }}</text>
+        </view>
+    </view>
+</template>
+<style lang="scss" scoped>
+.tabs_box {
+    background: rgba(255, 255, 255, 1);
+    padding: 0 26rpx;
+    border-bottom: 2rpx solid #f2f2f2;
+    border-top: 2rpx solid #f2f2f2;
+    position: sticky;
+    left: 0;
+    z-index: 99;
+    background-color: #fff;
+
+    .tab_item {
+        font-size: $font-size-28;
+        color: rgba(128, 128, 128, 1);
+        flex: 1;
+        text {
+            padding: 20rpx 0;
+        }
+    }
+    // 字体加粗
+    .tab_active_weight {
+        color: #101010;
+        font-weight: bold;
+        transition: all 0.3s;
+    }
+    // 带横线的
+    .tab_active {
+        color: rgba(255, 141, 26, 1);
+        transition: all 0.3s;
+
+        text {
+            position: relative;
+
+            &::after {
+                content: '';
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                bottom: 0;
+                width: 100%;
+                height: 4rpx;
+                background-color: rgba(255, 141, 26, 1);
+            }
+        }
+    }
+}
+</style>
diff --git a/src/store/tabbar.ts b/src/store/tabbar.ts
index 57b8bb33467600add0142dddd3120a128316245b..b27698d7d443a919ec3a737c27738fceacd976ff 100644
--- a/src/store/tabbar.ts
+++ b/src/store/tabbar.ts
@@ -3,6 +3,11 @@ import { getPrefixName } from '@/config'
 import type { menuListInt } from '@/components/lx-tabbar/type'
 
 export default defineStore(getPrefixName('tabbar'), () => {
+    // 头部高度
+    const headerHeight = ref(0)
+    function setHeaderHeight(num: number) {
+        headerHeight.value = num
+    }
     // tabbar选中项name
     const selectTabbarName = ref('home')
     // 循环的导航项
@@ -50,6 +55,8 @@ export default defineStore(getPrefixName('tabbar'), () => {
         selectTabbarName,
         menuList,
         clickTabbar,
-        tabbarChangeIndex
+        tabbarChangeIndex,
+        headerHeight,
+        setHeaderHeight
     }
 })