吸顶

manifest.json

@@ -51,7 +51,7 @@
       "mode": "history",
       "base": "/uni"
     },
-    "publicPath": "https://dbc-static.oss-cn-beijing.aliyuncs.com/dbc-shop/uni/prod/1.0.5/",
+    "publicPath": "https://dbc-static.oss-cn-beijing.aliyuncs.com/dbc-shop/uni/test/1.0.5/",
     "optimization": {
       "treeShaking": {
         "enable": true

pages/home/components/hotrecommd.vue

 <template>
-	<view class="hot_main_content">
-		<view class="clearfix" style="padding: 28rpx 0 20rpx">
+	<view class="hot_main_content" :style="[fixFlag ? {'padding-top': '100rpx'} : null]" ref="fix">
+		<view class="clearfix scrollbar" :class="{'fixed': fixFlag}">
 			<view class="hot_head_left">
 				<view>
 					<text class="hot_title">
@@ -10,7 +10,7 @@
 					<text class="hot_sub_title">{{style_setting.sub_title}}</text>
 				</view>
 			</view>
-			<view class="hot_cate_list">
+			<view class="hot_cate_list" :style="[fixFlag ? {'padding-right': '60rpx'} : null]">
 				<text class="hot_cate_item" v-for="(item, key) in cate_list" :key="key" @click="changeCate(key)" :class="key === hotIndex ? 'act' : ''" v-if="item.goods_list.length">
 					<text>{{item.cate_name}}</text>
 					<text>{{item.sub_title}}</text>
@@ -54,7 +54,8 @@
 			return {
 				style_setting: this.wrapper_props.style_setting,
 				cate_list: this.wrapper_props.cate_list,
-				hotIndex: 0
+				hotIndex: 0,
+				fixFlag: false
 			}
 		},
 		mounted() {
@@ -85,6 +86,19 @@
 	.hot_main_content {
 		width: 702rpx;
 		margin: 0 auto;
+		.scrollbar {
+			padding: 28rpx 0 20rpx;
+		}
+		.fixed {
+			position: fixed;
+			left: 0;
+			top: 100rpx;
+			background-color: #f8f8f8;
+			z-index: 10;
+			width: 100%;
+			padding: 28rpx 24rpx 20rpx;
+			box-shadow:0px 4px 16px 0px rgba(0,0,0,0.3);
+		}
 	}
 	.hot_head_left {
 		display: inline-block;
@@ -118,6 +132,7 @@
 		position: relative;
 		left: 20rpx;
 		height: 88rpx;
+		padding-right: 18rpx;
 	}
 	.hot_cate_list::-webkit-scrollbar {
 		display: none;

pages/home/components/searchbar.vue

@@ -59,6 +59,7 @@
 		width: 100%;
 		top: 0;
 		left: 0;
+		height: 100rpx;
 		box-sizing: border-box;
 		z-index: 100;
 		.flex {

pages/home/home.vue

 <template>
 	<view class="homeContent">
-		<component v-for="(item, index) in data" :key="index" :is="item.name" :wrapper_props="item.wrapper_props" :isLogin="isLogin"></component>
+		<component v-for="(item, index) in data" :key="index" :is="item.name" :wrapper_props="item.wrapper_props" :isLogin="isLogin" :ref="item.name"></component>
 		<BottomBar />
 	</view>
 </template>
@@ -21,7 +21,8 @@
 		data() {
 			return {
 				data: [],
-				isLogin: 0
+				isLogin: 0,
+				fixFlag: false
 			}
 		},
 		onLoad() {
@@ -36,6 +37,16 @@
 			}
 			// #endif
 		},
+		onPageScroll() {
+			const top = this.$refs.HotRecommd[0].$refs.fix.$el.getBoundingClientRect().top;
+			if(top <= 50  && !this.fixFlag) {
+				this.fixFlag = true;
+				this.$refs.HotRecommd[0].fixFlag = true;
+			} else if(top > 50  && this.fixFlag) {
+				this.fixFlag = false;
+				this.$refs.HotRecommd[0].fixFlag = false;
+			}
+		},
 		methods: {
 			getData() {
 				uni.request({