缩小重新做

components/header/header.wxss

@@ -1,8 +1,10 @@
 /* components/header/header.wxss */
 .header {
     height: 330rpx;
-    position: relative;
-  }
+    position: fixed;
+    z-index: 1200;
+    width: 100%;
+}
   .header .header-bg {
     z-index: 1;
     position: absolute;

pages/index/index.js

@@ -83,29 +83,16 @@ Page({
 
   onPageScroll: function(e) {
     wx.createSelectorQuery()
-      .select('.brand-bar')
+      .select('.container')
       .boundingClientRect((rect) => {
-        console.log("brandrecttop111");
         if (rect) {
-          const shouldBrandBeMini = rect.top <= 40; // 在brand-bar进入顶部时，category切换为mini模式
-          console.log("brandrecttop:" + rect.top);
-          console.log("shouldBrandBeMini" + shouldBrandBeMini);
-          if (this.data.isBrandMini !== shouldBrandBeMini) {
+          const shouldBarandBeMini = rect.top <= -480; // 在container上移到-480px时，品牌栏mini出现
+          if (this.data.isBrandMini !== shouldBarandBeMini) {
             this.setData({
-              isBrandMini: shouldBrandBeMini
+              isBrandMini: shouldBarandBeMini
             });
           }
-        }
-      })
-      .exec();
-    wx.createSelectorQuery()
-      .select('.category')
-      .boundingClientRect((rect) => {
-        console.log("categoryrecttop111");
-        if (rect) {
-          const shouldCategoryBeMini = rect.top <= 40; // 在category进入顶部时，category切换为mini模式
-          console.log("categoryrecttop:" + rect.top);
-          console.log("shouldCategoryBeMini" + shouldCategoryBeMini);
+          const shouldCategoryBeMini = rect.top <= -680; // 在container上移到-680px时，分类栏mini出现
           if (this.data.isCategoryMini !== shouldCategoryBeMini) {
             this.setData({
               isCategoryMini: shouldCategoryBeMini

pages/index/index.wxml

@@ -1,8 +1,8 @@
 <!--index.wxml-->
+<!-- 头部 -->
+<header position="index"></header>
+
 <view class="container">
-  
-  <!-- 头部 -->
-  <header position="index"></header>
 
   <view class="banner">
     <view class="banner-item">
@@ -28,14 +28,29 @@
       <image src="/images/index/hot-right.png" class="hot-image" bind:tap="presaleBut"></image>
     </view>
   </view>
-  <view class="brand-bar {{isBrandMini ? 'mini' : ''}}">
+  <view class="brand-bar">
+    brand-bar
+    <view wx:for="{{ipInfoList}}" wx:key="index" class="brand-item">
+      <image src="{{item.ipUrl}}" data-item="{{item}}" class="brand-image"></image>
+      <text class="brand-name">{{item.name}}</text>
+      <span>{{ item.className }}</span>
+    </view>
+  </view>
+  <view class="brand-bar mini" style="{{isBrandMini ? 'opacity: 1;' : 'opacity: 0;'}}">
+    brand-bar
     <view wx:for="{{ipInfoList}}" wx:key="index" class="brand-item">
       <image src="{{item.ipUrl}}" data-item="{{item}}" class="brand-image"></image>
       <text class="brand-name">{{item.name}}</text>
       <span>{{ item.className }}</span>
     </view>
   </view>
-  <view class="category {{isCategoryMini ? 'mini' : ''}}">
+  <view class="category">
+    <view wx:for="{{prodClassList}}" wx:key="index" class="category-item">
+      <image src="{{item.classUrl}}" data-item="{{item}}" class="category-image"></image>
+      <span>{{ item.className }}</span>
+    </view>
+  </view>
+  <view class="category mini" style="{{isCategoryMini ? 'opacity: 1;' : 'opacity: 0;'}}">
     <view wx:for="{{prodClassList}}" wx:key="index" class="category-item">
       <image src="{{item.classUrl}}" data-item="{{item}}" class="category-image"></image>
       <span>{{ item.className }}</span>

pages/index/index.wxss

@@ -5,8 +5,13 @@ page {
   display: flex;
   flex-direction: column;
 }
+.container {
+  padding-top: 330rpx; /* 留出头部空间 */
+}
 
 .banner {
+  z-index: 1200;
+  top: 0;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -51,12 +56,17 @@ page {
   transition: all 0.3s ease;
 }
 .brand-bar.mini {
+  opacity: 1;
   position: fixed; /* 固定在页面顶部 */
   z-index: 1100;
+  min-width: 365rpx;
   height: 80rpx;
+  width: 656rpx;
   flex-wrap: nowrap;
   overflow-x: auto;
-  top: 160rpx;
+  top: 316rpx;
+  background: rgb(252, 84, 255);
+  border-radius: 30rpx;
 }
 
 .brand-bar .brand-item {
@@ -119,13 +129,14 @@ page {
 
 /* mini 模式的css */
 .category.mini {
+  opacity: 1;
   position: fixed; /* 固定在页面顶部 */
   z-index: 1000;
   height: 80rpx;
   padding: 0 20rpx;
   flex-wrap: nowrap;
   overflow-x: auto;
-  top: 250rpx;
+  top: 440rpx;
 }
 
 .category.mini .category-item {