diff --git a/src/components/lx-header/lx-header.vue b/src/components/lx-header/lx-header.vue
index 4a0cce861ba4368af197604920b189afa6a92e30..84e41be1203b701953f5b134fe25a1e049d807ae 100644
--- a/src/components/lx-header/lx-header.vue
+++ b/src/components/lx-header/lx-header.vue
@@ -9,6 +9,8 @@
  */
 import { goToPage } from '@/utils/util'
 import { ref, watchEffect, type CSSProperties } from 'vue'
+// 引入tabbar
+import useTabbarInfo from '@/store/tabbar'
 
 type headerInt = {
     // 头部高度 默认为44px （微信小程序不可用）
@@ -51,13 +53,13 @@ let { statusBarHeight } = uni.getSystemInfoSync()
 // 胶囊状态
 let menuButton = uni.getMenuButtonBoundingClientRect()
 // 微信头部宽度
-let wxHeaderWidth = menuButton.left
+let wxHeaderWidth = menuButton.left - 10
 // 上边距
 statusBarHeight = menuButton.top
 // #endif
 
 // padding的高度（防止头部塌陷）
-const fillBoxHeight = ref(statusBarHeight + 5)
+const fillBoxHeight = ref(statusBarHeight + 3)
 
 // 设置header的高度
 const headerHeightRef = ref(0)
@@ -68,9 +70,9 @@ watchEffect(() => {
     headerHeightRef.value = menuButton.height
     // #endif
 })
+// console.log('statusBarHeight', statusBarHeight)
 
 const style = computed(() => {
-    // console.log(props.positionState === 'fixed')
     return {
         boxShadow: props.isShowShadow ? '0 0 8rpx -3rpx #333' : '0 0 0 0 #333',
         background: props.backgroundColor,
@@ -78,6 +80,8 @@ const style = computed(() => {
         position: props.positionState
     } as CSSProperties
 })
+// tabbar数据
+const tabbarInfo = useTabbarInfo()
 // 返回上一页(如没有页面返回首页)
 const goBack = () => {
     if (getCurrentPages().length <= 1) {
@@ -85,6 +89,8 @@ const goBack = () => {
             url: 'pages/index/index',
             mode: 'redirectTo'
         })
+        // 处理返回首页
+        tabbarInfo.clickTabbar(tabbarInfo.menuList[0])
     } else {
         uni.navigateBack()
     }
@@ -137,7 +143,13 @@ const goBack = () => {
         </view>
         <!-- 填充头部防止塌陷 -->
         <view class="status_bar" :style="{ height: fillBoxHeight + 'px' }"></view>
+        <!-- #ifdef MP-WEIXIN -->
+        <view v-if="isShowHeaderBox" :style="{ height: headerHeightRef + 4 + 'px', background: backgroundColor2 }"></view>
+        <!-- #endif -->
+        <!-- 待测试 -->
+        <!-- #ifndef MP-WEIXIN -->
         <view v-if="isShowHeaderBox" :style="{ height: headerHeightRef + 'px', background: backgroundColor2 }"></view>
+        <!-- #endif -->
     </view>
 </template>
 
diff --git a/src/components/lx-list/lx-list.vue b/src/components/lx-list/lx-list.vue
index 9475baf417afd397bb860544b611113ca1ee1b76..7d6d3191475128ca9b11be34438e704fcf378f7f 100644
--- a/src/components/lx-list/lx-list.vue
+++ b/src/components/lx-list/lx-list.vue
@@ -89,9 +89,9 @@ const scrolltolower = () => {
                 <u-search placeholder="请输入搜索内容" v-model="inputTxt" @change="inputChange" :show-action="false"></u-search>
             </view>
             <view class="lxx_list_box_content" :style="{ paddingTop: isFixedSearch ? '100rpx' : 'unset' }">
-                <view v-for="(item, index) in list" :key="index">
+                <template v-for="(item, index) in list" :key="index">
                     <slot v-bind:item="item" v-bind:index="index"></slot>
-                </view>
+                </template>
             </view>
             <lx-list-state :is-empty="isEmpty" :is-loading="isLoading" :is-no-data="isNoData"></lx-list-state>
         </view>
diff --git a/src/components/lx-tabbar/lx-tabbar.vue b/src/components/lx-tabbar/lx-tabbar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4367d949fabfa6dc50c79fde853c2b6870301f27
--- /dev/null
+++ b/src/components/lx-tabbar/lx-tabbar.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+/*
+ * @description: 公用组件tabbar
+ * @fileName: lx-tabbar.vue
+ * @params
+ * @author: lxx
+ * @date: 2023-10-13 15:10:09"
+ * @version: V1.0.0
+ */
+import type { menuListInt } from './type'
+import useTabbarInfo from '@/store/tabbar'
+const tabbarInfo = useTabbarInfo()
+// 切换tabbar
+const menuClick = (item: menuListInt) => {
+    tabbarInfo.clickTabbar(item)
+}
+</script>
+<template>
+    <view class="lxx_main_tabbar flex">
+        <view class="flex lxx_tabbar_item column" v-for="item in tabbarInfo.menuList" :key="item.name" @click="menuClick(item)">
+            <view class="icon_box">
+                <image v-if="tabbarInfo.selectTabbarName !== item.name" :src="item.icon" mode="aspectFit" />
+                <image v-else :src="item.selectIcon" mode="aspectFit" />
+                <!-- <view
+                    v-if="selectMenuId == item.id"
+                    class="icon"
+                    :style="{ 'background-image': `url('/static/tabbarIcon/index.png')`, 'background-size': '100% 100%' }"
+                ></view> -->
+            </view>
+            <view class="name">{{ item.title }}</view>
+        </view>
+    </view>
+</template>
+<style lang="scss" scoped>
+.lxx_main_tabbar {
+    /* 兼容 iOS < 11.2 */
+    padding-bottom: constant(safe-area-inset-bottom);
+    /* 兼容 iOS >= 11.2 */
+    padding-bottom: env(safe-area-inset-bottom);
+    padding-top: 10rpx;
+    box-shadow: 0 0 16rpx #ddd;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    z-index: 999;
+    width: 100%;
+    background-color: #fff;
+
+    .lxx_tabbar_item {
+        flex: 1;
+        height: 100rpx;
+
+        @if env(safe-area-inset-bottom) {
+            padding-bottom: 0;
+        } @else {
+            padding-bottom: 10rpx;
+        }
+
+        .icon_box {
+            width: 45rpx;
+            height: 45rpx;
+
+            // 使用背景图实现样式（暂未使用）
+            .icon {
+                width: 100%;
+                height: 100%;
+            }
+
+            image {
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        .name {
+            color: #7d7e80;
+            margin-top: 6rpx;
+            font-size: 26rpx;
+        }
+    }
+}
+</style>
diff --git a/src/components/lx-tabbar/type.ts b/src/components/lx-tabbar/type.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d04c07519f50a5fd20cd417ee5ff23718c3354d9
--- /dev/null
+++ b/src/components/lx-tabbar/type.ts
@@ -0,0 +1,10 @@
+/*
+tabbar菜单列表数据类型
+*/
+export interface menuListInt {
+    name: string
+    icon: string
+    selectIcon: string
+    title: string
+    pageUrl: string
+}
diff --git a/src/hooks/useListLoadClass.ts b/src/hooks/useListLoadClass.ts
index e9755c29b4e30cd77aaa2f03b75bb20f89a8b9f2..ee49d88c596f1e6ef84c36c10705b13a2ddc6816 100644
--- a/src/hooks/useListLoadClass.ts
+++ b/src/hooks/useListLoadClass.ts
@@ -7,10 +7,10 @@
  */
 class LoadDataClass {
     // 请求参数
-    static queryParams = {
+    static queryParams = reactive({
         page: 1,
         limit: 10
-    }
+    })
     // 列表数据
     list = ref<any[]>([])
     total = ref(0)
@@ -38,6 +38,7 @@ class LoadDataClass {
     })
 
     constructor(apiFunctions: Function, afterLoadData?: Function, options: any = {}) {
+        this.queryParamsReset()
         this.Query = apiFunctions
         this.afterLoadData = afterLoadData
         // console.log('options', options)
@@ -83,10 +84,10 @@ class LoadDataClass {
     }
     // 重置参数
     queryParamsReset = () => {
-        LoadDataClass.queryParams = {
+        LoadDataClass.queryParams = reactive({
             page: 1,
             limit: 10
-        }
+        })
     }
 
     /**
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 76a16a0115821d9d78b84bdc1c241216ff91d593..c969b66cb56a9f8fa8e580f38e2f2dbc41e3a704 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -37,6 +37,7 @@ console.log('xxx', formatTime(Date.now(), 'yyyy-MM-dd'))
             <view>模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作</view>
         </lx-dialog>
     </view>
+    <lx-tabbar></lx-tabbar>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/src/pages/listDemo/listDemo.vue b/src/pages/listDemo/listDemo.vue
index 30bec5b62cb6e5d8dd19e6a59aea203ad30194bc..2026ae4a31e547ac1f99c45c71ed0ae782b52205 100644
--- a/src/pages/listDemo/listDemo.vue
+++ b/src/pages/listDemo/listDemo.vue
@@ -8,18 +8,20 @@ const afterLoadData = (data: any) => {
 }
 const lxListRef = ref()
 onReady(() => {
-    lxListRef.value.setListParams({ name: 2 })
-    console.log('lxList.value', lxListRef.value)
+    // 切换参数刷新列表（选项卡等）
+    // lxListRef.value.setListParams({ name: 2 })
+    // console.log('lxList.value', lxListRef.value)
 })
 </script>
 
 <template>
-    <lx-header :title="'列表测试页面'"></lx-header>
+    <lx-header :title="'列表测试页面'" :leftIconShow="false"></lx-header>
     <lx-list ref="lxListRef" :api="demo" :after-load-data="afterLoadData">
         <template v-slot="{ item, index }">
             <view>{{ index }} ---- {{ item }}</view>
         </template>
     </lx-list>
+    <lx-tabbar />
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/src/static/tabbarIcon/index.png b/src/static/tabbarIcon/index.png
new file mode 100644
index 0000000000000000000000000000000000000000..461be009d96e99599d6796c2bbb845f7f8630906
Binary files /dev/null and b/src/static/tabbarIcon/index.png differ
diff --git a/src/static/tabbarIcon/index_act.png b/src/static/tabbarIcon/index_act.png
new file mode 100644
index 0000000000000000000000000000000000000000..11f283670c0af15da1b70846f2088cad4d6f1e2c
Binary files /dev/null and b/src/static/tabbarIcon/index_act.png differ
diff --git a/src/static/tabbarIcon/mine.png b/src/static/tabbarIcon/mine.png
new file mode 100644
index 0000000000000000000000000000000000000000..d4a2f91e557effaef974964d642d339c3158ed1c
Binary files /dev/null and b/src/static/tabbarIcon/mine.png differ
diff --git a/src/static/tabbarIcon/mine_act.png b/src/static/tabbarIcon/mine_act.png
new file mode 100644
index 0000000000000000000000000000000000000000..fe253930e2912312355ac1bd759c91e80f4d2186
Binary files /dev/null and b/src/static/tabbarIcon/mine_act.png differ
diff --git a/src/static/tabbarIcon/serve.png b/src/static/tabbarIcon/serve.png
new file mode 100644
index 0000000000000000000000000000000000000000..676556e477754d6465fc7ea555b50df706938241
Binary files /dev/null and b/src/static/tabbarIcon/serve.png differ
diff --git a/src/static/tabbarIcon/serve_act.png b/src/static/tabbarIcon/serve_act.png
new file mode 100644
index 0000000000000000000000000000000000000000..c7a9e88ae87e01cb5774b451f1764ba471c8f98f
Binary files /dev/null and b/src/static/tabbarIcon/serve_act.png differ
diff --git a/src/store/tabbar.ts b/src/store/tabbar.ts
new file mode 100644
index 0000000000000000000000000000000000000000..986e0f9bdeb4fde20f551486ded129c2573edac9
--- /dev/null
+++ b/src/store/tabbar.ts
@@ -0,0 +1,50 @@
+import { defineStore } from 'pinia'
+import { getPrefixName } from '@/config'
+import type { menuListInt } from '@/components/lx-tabbar/type'
+
+export default defineStore(getPrefixName('tabbar'), () => {
+    // tabbar选中项name
+    const selectTabbarName = ref('home')
+    // 循环的导航项
+    const menuList = ref<menuListInt[]>([
+        {
+            name: 'home',
+            icon: '/static/tabbarIcon/index.png',
+            selectIcon: '/static/tabbarIcon/index_act.png',
+            title: '首页',
+            pageUrl: 'pages/index/index'
+        },
+        {
+            name: 'order',
+            icon: '/static/tabbarIcon/serve.png',
+            selectIcon: '/static/tabbarIcon/serve_act.png',
+            title: '服务',
+            pageUrl: ''
+        },
+        {
+            name: 'mine',
+            icon: '/static/tabbarIcon/mine.png',
+            selectIcon: '/static/tabbarIcon/mine_act.png',
+            title: '我的',
+            pageUrl: 'pages/listDemo/listDemo'
+        }
+    ])
+
+    // tabbar点击事件
+    function clickTabbar(item: menuListInt) {
+        const { name, pageUrl: url } = item
+        // console.log('点击了tabbar', name, selectTabbarName.value)
+        if (name === selectTabbarName.value) return
+        selectTabbarName.value = name
+        if (!url) return
+        uni.goToPage({
+            url,
+            mode: 'reLaunch'
+        })
+    }
+    return {
+        selectTabbarName,
+        menuList,
+        clickTabbar
+    }
+})