diff --git a/components.d.ts b/components.d.ts
index 6725db6..21558f6 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -10,12 +10,13 @@ declare module 'vue' {
   export interface GlobalComponents {
     Container: typeof import('./components/guyu/home/container.vue')['default']
     GoodsItem: typeof import('./components/guyu/home/goods-item.vue')['default']
+    GoodsList: typeof import('./components/guyu/home/goods-list.vue')['default']
     Notice: typeof import('./components/guyu/home/notice.vue')['default']
     Recommend: typeof import('./components/guyu/home/recommend.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Search: typeof import('./components/guyu/home/search.vue')['default']
-    StickySwiperNextItem: typeof import('./components/sticky-swiper-next-item/sticky-swiper-next-item.vue')['default']
     Swiper: typeof import('./components/guyu/home/swiper.vue')['default']
+    Tabs: typeof import('./components/guyu/home/tabs.vue')['default']
   }
 }
diff --git a/components/guyu/home/goods-list.vue b/components/guyu/home/goods-list.vue
new file mode 100644
index 0000000..35549bc
--- /dev/null
+++ b/components/guyu/home/goods-list.vue
@@ -0,0 +1,143 @@
+<!-- 在这个文件对每个tab对应的列表进行渲染 -->
+<template>
+    <view class="content">
+        <!-- 这里设置了z-paging加载时禁止自动调用reload方法，自行控制何时reload（懒加载）-->
+        <z-paging ref="paging" v-model="dataList" @query="queryList" use-page-scroll :scrollable="false"
+            :hide-empty-view="hideEmptyView" :refresher-enabled="false" @contentHeightChanged="contentHeightChanged"
+            :auto="false" :auto-clean-list-when-reload="false">
+            <!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
+            <view class="item" v-for="(item, index) in dataList" :key="index">
+                <view class="item-title">{{ item.title }}</view>
+                <view class="item-detail">{{ item.detail }}</view>
+                <view class="item-line"></view>
+            </view>
+        </z-paging>
+    </view>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            // v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
+            dataList: [],
+            height: 0,
+            hideEmptyView: true,
+            completeFunc: null
+        }
+    },
+    props: {
+        // 当前组件的index，也就是当前组件是swiper中的第几个
+        tabIndex: {
+            type: Number,
+            default: function () {
+                return 0
+            }
+        },
+        // 当前swiper切换到第几个index
+        currentIndex: {
+            type: Number,
+            default: function () {
+                return 0
+            }
+        }
+    },
+    watch: {
+        currentIndex: {
+            handler(newVal) {
+                if (newVal === this.tabIndex) {
+                    // 懒加载，当滑动到当前的item时，才去加载
+                    this.$nextTick(() => {
+                        setTimeout(() => {
+                            this.$refs.paging.reload();
+                        }, 100);
+                    })
+                }
+            },
+            immediate: true
+        }
+    },
+    methods: {
+        queryList(pageNo, pageSize) {
+            // 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
+            // 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
+            // 模拟请求服务器获取分页数据，请替换成自己的网络请求
+            const params = {
+                pageNo: pageNo,
+                pageSize: pageSize,
+                type: this.tabIndex + 1
+            }
+            let c = [];
+            for (let i = 0; i < 10; i++) {
+                c.push({
+                    title: '测试' + i,
+                    detail: '详情' + i
+                })
+            }
+            this.$refs.paging.complete(c);
+            this.hideEmptyView = false;
+            //请求结束，调用父组件的下拉刷新结束回调函数，使得父组件中的z-paging下拉刷新结束
+            if (this.completeFunc) {
+                this.completeFunc();
+            }
+        },
+        // 页面通知当前子组件刷新列表
+        reload(completeFunc) {
+            // 先把父组件下拉刷新的回调函数存起来
+            this.completeFunc = completeFunc;
+            // 调用z-paging的reload方法
+            this.$refs.paging.reload();
+        },
+        // 当列表高度改变时，通知页面的swiper同步更改高度
+        contentHeightChanged(height) {
+            const finalHeight = this.dataList.length ? height : 0;
+            // 限制内容最小高度为屏幕可见高度减z-tabs高度。注意，页面中有使用slot="top"插入的view，则此处的minHeight还应该减去slot="top"插入的view的高度
+            const minHeight = uni.getSystemInfoSync().windowHeight - uni.upx2px(80);
+            this.$emit('heightChanged', Math.max(finalHeight, minHeight));
+        },
+        // 页面通知当前子组件加载更多数据
+        doLoadMore() {
+            this.$refs.paging.doLoadMore();
+        },
+        // 页面通知当前子组件清除数据
+        clear() {
+            this.$refs.paging.clear();
+            this.hideEmptyView = true;
+        }
+    }
+}
+</script>
+
+<style>
+/* 注意，1、父节点需要固定高度，z-paging的height:100%才会生效 */
+/* 注意，2、请确保z-paging与同级的其他view的总高度不得超过屏幕宽度，以避免超出屏幕高度时页面的滚动与z-paging内部的滚动冲突 */
+.content {
+    height: 100%;
+}
+
+.item {
+    position: relative;
+    height: 150rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0rpx 30rpx;
+}
+
+.item-detail {
+    padding: 5rpx 15rpx;
+    border-radius: 10rpx;
+    font-size: 28rpx;
+    color: white;
+    background-color: #007AFF;
+}
+
+.item-line {
+    position: absolute;
+    bottom: 0rpx;
+    left: 0rpx;
+    height: 1px;
+    width: 100%;
+    background-color: #eeeeee;
+}
+</style>
diff --git a/components/guyu/home/tabs.vue b/components/guyu/home/tabs.vue
new file mode 100644
index 0000000..867509f
--- /dev/null
+++ b/components/guyu/home/tabs.vue
@@ -0,0 +1,126 @@
+<template>
+    <view class="tabs-container">
+        <view class="tabs-wrapper">
+            <template v-for="(item, index) in list" :key="index">
+                <view class="tab-item-wrapper" :style="{ width: getLableWidth(item.name) }">
+                    <view class="tab-item" @click="clickTab(index)">
+                        <text class="tab-text myZt-500w">{{ item.name }}</text>
+                    </view>
+                    <view style="position: relative;width:50%;height: 100%;overflow: hidden;top: -100%;"
+                        :style="{ width: getNextWidth(index) }">
+                        <view style="" :style="{ width: getLableWidth(item.name) }">
+                            <view class="tab-item tab-item-active" @click="clickTab(index)">
+                                <text class="tab-text myZt-500w">{{ item.name }}</text>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </template>
+        </view>
+    </view>
+</template>
+<script setup>
+import { onMounted, ref } from 'vue';
+
+const props = defineProps({
+    list: {
+        type: Array,
+        default: () => []
+    },
+    current: {
+        type: Number,
+        default: 0
+    }
+});
+onMounted(() => {
+
+})
+const getLableWidth = (name) => {
+    let t = name.length * 20 + 40;
+    if (t < 80) {
+        t = 80;
+    }
+    return t + "rpx";
+}
+const getNextWidth = (currendIndex) => {
+    if (swiperDx.value == 0) {
+        return "0%";
+    }
+    if (swiperDx.value < 0) {
+
+    }
+    if (currendIndex == props.current) {
+        return ((swiperDx.value / systemWidth).toFixed(2) * 100) + "%";
+    }
+    return "0%";
+
+}
+// computed()
+
+const systemWidth = parseInt(uni.getSystemInfoSync().screenWidth * 0.96);
+const emit = defineEmits(['change']);
+
+// 方法
+const clickTab = (index) => {
+    emit("change", index)
+};
+
+let swiperDx = ref(0);
+let throttleTimer = null;
+const setDx = (dx) => {
+    if (!throttleTimer) {
+        swiperDx.value = parseInt(dx);
+        console.log(swiperDx.value, dx, systemWidth, getNextWidth(props.current));
+        throttleTimer = setTimeout(() => {
+            throttleTimer = null;
+        }, 20);
+    }
+}
+
+const unlockDx = () => {
+    swiperDx.value = 0;
+}
+
+// 暴露方法给父组件
+defineExpose({
+    setDx,
+    unlockDx
+});
+</script>
+<style lang="scss" scoped>
+.tabs-container {
+    width: 100%;
+}
+
+.tabs-wrapper {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    margin-top: 32.64rpx;
+}
+
+.tab-item-wrapper {
+    min-width: 80rpx;
+    margin-right: 26.39rpx;
+    text-align: center;
+    line-height: 40rpx;
+    height: 50rpx;
+    overflow: hidden;
+}
+
+.tab-item {
+    border-radius: 50rpx;
+    background-color: transparent;
+    border: 1rpx solid #9A8F79;
+
+}
+
+.tab-item-active {
+    background-color: #F5D677;
+    border: 1rpx solid transparent;
+}
+
+.tab-text {
+    font-size: 22rpx;
+}
+</style>
\ No newline at end of file
diff --git a/components/sticky-swiper-next-item/sticky-swiper-next-item.vue b/components/sticky-swiper-next-item/sticky-swiper-next-item.vue
deleted file mode 100644
index 2f95c63..0000000
--- a/components/sticky-swiper-next-item/sticky-swiper-next-item.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<!-- 在这个文件对每个tab对应的列表进行渲染 -->
-<template>
-	<view class="content">
-		<!-- 这里设置了z-paging加载时禁止自动调用reload方法，自行控制何时reload（懒加载）-->
-		<z-paging ref="paging" v-model="dataList" @query="queryList" use-page-scroll :scrollable="false" :hide-empty-view="hideEmptyView"
-			:refresher-enabled="false" @contentHeightChanged="contentHeightChanged" :auto="false" :auto-clean-list-when-reload="false">
-			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
-			<view class="item" v-for="(item,index) in dataList" :key="index">
-				<view class="item-title">{{item.title}}</view>
-				<view class="item-detail">{{item.detail}}</view>
-				<view class="item-line"></view>
-			</view>
-		</z-paging>
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				// v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
-				dataList: [],
-				height: 0,
-				hideEmptyView: true,
-				completeFunc: null
-			}
-		},
-		props: {
-			// 当前组件的index，也就是当前组件是swiper中的第几个
-			tabIndex: {
-				type: Number,
-				default: function(){
-					return 0
-				}
-			},
-			// 当前swiper切换到第几个index
-			currentIndex: {
-				type: Number,
-				default: function(){
-					return 0
-				}
-			}
-		},
-		watch: {
-			currentIndex: {
-				handler(newVal) {
-					if (newVal === this.tabIndex) {
-						// 懒加载，当滑动到当前的item时，才去加载
-						this.$nextTick(() => {
-							setTimeout(() => {
-								this.$refs.paging.reload();
-							}, 100);
-						})
-					}
-				},
-				immediate: true
-			}
-		},
-		methods: {
-			queryList(pageNo, pageSize) {
-				// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
-				// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
-				// 模拟请求服务器获取分页数据，请替换成自己的网络请求
-				const params = {
-					pageNo: pageNo,
-					pageSize: pageSize,
-					type: this.tabIndex + 1
-				}
-				let c=[];
-				for(let i=0;i<10;i++){
-					c.push({
-						title: '测试' + i,
-						detail: '详情' + i
-					})
-				}
-				this.$refs.paging.complete(c);
-				this.hideEmptyView = false;
-				//请求结束，调用父组件的下拉刷新结束回调函数，使得父组件中的z-paging下拉刷新结束
-				if (this.completeFunc) {
-					this.completeFunc();
-				}
-			},
-			// 页面通知当前子组件刷新列表
-			reload(completeFunc) {
-				// 先把父组件下拉刷新的回调函数存起来
-				this.completeFunc = completeFunc;
-				// 调用z-paging的reload方法
-				this.$refs.paging.reload();
-			},
-			// 当列表高度改变时，通知页面的swiper同步更改高度
-			contentHeightChanged(height){
-				const finalHeight = this.dataList.length ? height : 0;
-				// 限制内容最小高度为屏幕可见高度减z-tabs高度。注意，页面中有使用slot="top"插入的view，则此处的minHeight还应该减去slot="top"插入的view的高度
-				const minHeight = uni.getSystemInfoSync().windowHeight - uni.upx2px(80);
-				this.$emit('heightChanged',Math.max(finalHeight, minHeight));
-			},
-			// 页面通知当前子组件加载更多数据
-			doLoadMore(){
-				this.$refs.paging.doLoadMore();
-			},
-			// 页面通知当前子组件清除数据
-			clear(){
-				this.$refs.paging.clear();
-				this.hideEmptyView = true;
-			}
-		}
-	}
-</script>
-
-<style>
-	/* 注意，1、父节点需要固定高度，z-paging的height:100%才会生效 */
-	/* 注意，2、请确保z-paging与同级的其他view的总高度不得超过屏幕宽度，以避免超出屏幕高度时页面的滚动与z-paging内部的滚动冲突 */
-	.content {
-		height: 100%;
-	}
-
-	.item {
-		position: relative;
-		height: 150rpx;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 0rpx 30rpx;
-	}
-
-	.item-detail {
-		padding: 5rpx 15rpx;
-		border-radius: 10rpx;
-		font-size: 28rpx;
-		color: white;
-		background-color: #007AFF;
-	}
-
-	.item-line {
-		position: absolute;
-		bottom: 0rpx;
-		left: 0rpx;
-		height: 1px;
-		width: 100%;
-		background-color: #eeeeee;
-	}
-</style>
diff --git a/pages/home/home-page.vue b/pages/home/home-page.vue
index d3fa6e9..b776e75 100644
--- a/pages/home/home-page.vue
+++ b/pages/home/home-page.vue
@@ -1,29 +1,28 @@
 <!-- 滑动切换选项卡+吸顶演示(上一个tab数据不保留，滚动流畅) -->
 <template>
-	<view class="content">
+	<view>
 		<z-paging ref="pagePaging" refresher-only @onRefresh="onRefresh" @scrolltolower="scrolltolower"
 			@scroll="scroll">
+			<view class="content">
+				<guyu-home-search style="width: 100%;"></guyu-home-search>
+				<!-- 公告 -->
+				<guyu-home-notice :notice-info="homeData?.noticeInfo" />
+				<!-- 轮播图 -->
+				<guyu-home-swiper :advert-list="homeData?.advertList" style="width: 100%;" />
+				<!-- 推荐位 -->
+				<guyu-home-recommend :rec-list="homeData?.recList" @item-click="toDetails" style="width: 100%;" />
 
-			<view class="banner-view" style="height: 250rpx;">
-				<view style="font-size: 40rpx;font-weight: 700;">这是一个banner</view>
-				<view style="font-size: 24rpx;margin-top: 5rpx;">下方tab滚动时可吸附在顶部</view>
-			</view>
-			<view>
 				<!-- 小程序中直接修改组件style为position: sticky;无效，需要在组件外层套一层view -->
 				<view class="bar-view" style="z-index:97;position: sticky;top :0;background-color: #fff;">
-					<view :style="{ height: tabsBarHeight + 'px' }" class="status-bar">
-
-					</view>
-					<z-tabs ref="tabs" :current="current" :list="tabList" @change="tabsChange" />
+					<view :style="{ height: tabsBarHeight + 'px' }" class="status-bar"> </view>
+					<guyu-home-tabs ref="tabs" :list="homeData.categories" @change="tabsChange" :current="current" />
 				</view>
 				<swiper class="swiper" :style="[{ height: swiperHeight + 'px' }]" :current="current"
 					@transition="swiperTransition" @animationfinish="swiperAnimationfinish">
 					<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
-						<!-- 这里的sticky-swiper-next-item为demo中为演示用定义的组件，列表及分页代码在sticky-swiper-next-item组件内 -->
-						<!-- 请注意，sticky-swiper-next-item非z-paging内置组件，在自己的项目中必须自己创建，若未创建则会报组件不存在的错误 -->
-						<stickySwiperNextItemVue ref="swiperList" :tabIndex="index" :currentIndex="current"
+						<guyu-home-goods-list ref="swiperList" :tabIndex="index" :currentIndex="current"
 							@heightChanged="heightChanged">
-						</stickySwiperNextItemVue>
+						</guyu-home-goods-list>
 					</swiper-item>
 				</swiper>
 			</view>
@@ -31,108 +30,114 @@
 	</view>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted } from 'vue';
+import {
+	homeData,
+	isLoading,
+	error,
+	preloadHomeData,
+	refreshHomeData
+} from '@/common/server/home';
+// 状态变量
+const swiperHeight = ref(0);
+const tabList = ref(['测试1', '测试2', '测试3', '测试4']);
+const current = ref(0); // tabs组件的current值，表示当前活动的tab选项
+const tabsBarHeight = ref(0);
+const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight);
+const isQuerying = ref(false);
 
-import stickySwiperNextItemVue from '../../components/sticky-swiper-next-item/sticky-swiper-next-item.vue';
-export default {
-	components: {
-		stickySwiperNextItemVue
-	},
-	data() {
-		let statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
-		return {
-			swiperHeight: 0,
-			tabList: ['测试1', '测试2', '测试3', '测试4'],
-			current: 0, // tabs组件的current值，表示当前活动的tab选项
-			swiperHeight: 0,
-			tabsBarHeight: 0,
-			observer: null,
-			statusBarHeight,
-			isQuerying: false
+// 组件引用
+const pagePaging = ref(null);
+const tabs = ref(null);
+const swiperList = ref(null);
+
+onLoad(() => {
+
+});
+// 初始化加载
+onMounted(() => {
+	if (!homeData.value) preloadHomeData();
+});
+// 方法
+const scroll = (e) => {
+	// #ifdef MP
+	if (e.detail.scrollTop < 700 && statusBarHeight.value > 0) {
+		if (isQuerying.value) {
+			return;
 		}
-	},
-	methods: {
-		scroll(e) {
-			// #ifdef MP
-			if (e.detail.scrollTop < 700 && this.statusBarHeight > 0) {
-				if (this.isQuerying) {
-					return;
+		isQuerying.value = true;
+		const query = uni.createSelectorQuery();
+		query.select('.bar-view').boundingClientRect(rect => {
+			if (rect) {
+				// 判断元素是否粘滞
+				if (rect.top <= 0 && tabsBarHeight.value == 0) {
+					tabsBarHeight.value = statusBarHeight.value;
+				} else if (rect.top > 30 && statusBarHeight.value > 0) {
+					tabsBarHeight.value = 0;
 				}
-				this.isQuerying = true;
-				const query = uni.createSelectorQuery().in(this);
-				query.select('.bar-view').boundingClientRect(rect => {
-					if (rect) {
-						// 判断元素是否粘滞
-						if (rect.top <= 30) {
-							this.tabsBarHeight = this.statusBarHeight;
-						} else if (rect.top > 30 && this.statusBarHeight > 0) {
-							this.tabsBarHeight = 0;
-						}
-					}
-					this.isQuerying = false;
-
-				}).exec();
 			}
-			// #endif
-		},
-		// tabs通知swiper切换
-		tabsChange(index) {
-			this._setCurrent(index);
-		},
-		// 下拉刷新时，通知当前显示的列表进行reload操作
-		onRefresh() {
-			this.$refs.swiperList[this.current].reload(() => {
-				//当当前显示的列表刷新结束，结束当前页面的刷新状态
-				this.$refs.pagePaging.endRefresh();
-			});
-		},
-		// 当滚动到底部时，通知当前显示的列表加载更多
-		scrolltolower() {
-			this.$refs.swiperList[this.current].doLoadMore();
-		},
-		// swiper滑动中
-		swiperTransition(e) {
-			this.$refs.tabs.setDx(e.detail.dx);
-		},
-		// swiper滑动结束
-		swiperAnimationfinish(e) {
-			this._setCurrent(e.detail.current);
-			this.$refs.tabs.unlockDx();
-		},
-		// 设置swiper的高度
-		heightChanged(height) {
-			if (height === 0) {
-				// 默认swiper高度为屏幕可用高度-tabsView高度-slot="top"内view的高度
-				// 注意：uni.upx2px(80)不是固定的，它等于slot="top"内view的高度，如果slot="top"内view的高度不为80rpx，则需要修改这个值
-				height = uni.getSystemInfoSync().windowHeight - uni.upx2px(80);
-			}
-			this.swiperHeight = height;
-		},
-		_setCurrent(current) {
-			if (current !== this.current) {
-				//切换tab时，将上一个tab的数据清空
-				this.$refs.swiperList[this.current].clear();
-			}
-			this.current = current;
-		}
+			isQuerying.value = false;
+		}).exec();
 	}
-}
+	// #endif
+};
+
+// tabs通知swiper切换
+const tabsChange = (index) => {
+	_setCurrent(index);
+};
+
+// 下拉刷新时，通知当前显示的列表进行reload操作
+const onRefresh = () => {
+	swiperList.value[current.value].reload(() => {
+		//当当前显示的列表刷新结束，结束当前页面的刷新状态
+		pagePaging.value.endRefresh();
+	});
+};
+
+// 当滚动到底部时，通知当前显示的列表加载更多
+const scrolltolower = () => {
+	swiperList.value[current.value].doLoadMore();
+};
+
+// swiper滑动中
+const swiperTransition = (e) => {
+	tabs.value.setDx(e.detail.dx);
+};
+
+// swiper滑动结束
+const swiperAnimationfinish = (e) => {
+	_setCurrent(e.detail.current);
+	tabs.value.unlockDx();
+};
+
+// 设置swiper的高度
+const heightChanged = (height) => {
+	if (height === 0) {
+		// 默认swiper高度为屏幕可用高度-tabsView高度-slot="top"内view的高度
+		// 注意：uni.upx2px(80)不是固定的，它等于slot="top"内view的高度，如果slot="top"内view的高度不为80rpx，则需要修改这个值
+		height = uni.getSystemInfoSync().windowHeight - uni.upx2px(80);
+	}
+	swiperHeight.value = height;
+};
+
+const _setCurrent = (currentVal) => {
+	if (currentVal !== current.value) {
+		//切换tab时，将上一个tab的数据清空
+		swiperList.value[current.value].clear();
+	}
+	current.value = currentVal;
+};
 </script>
 
-<style>
-.banner-view {
-	background-color: #007AFF;
-	color: white;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-}
-
-.paging-content {
-	flex: 1;
-	display: flex;
-	flex-direction: column;
+<style lang="scss" scoped>
+.content {
+	width: 96%;
+	margin-left: 2%;
+	background-color: url('@@:static/bg.png');
+	background-size: 100% 100%;
+	background-repeat: no-repeat;
 }
 
 .swiper {