双固定顶部

pages/index/index.js

@@ -11,7 +11,9 @@ Page({
     prodClassList: [],
     showAddCartModal: false,
     currentProduct: null,
-    isCategoryMini: false
+
+    isCategoryMini_1: false,
+    isCategoryMini_2: false
   },
   // 显示商品属性模态框
   showAddCartModal(e) {
@@ -81,13 +83,26 @@ Page({
 
   onPageScroll: function(e) {
     wx.createSelectorQuery()
-      .select('.brand-bar')
+      .select('.brand-bar-1')
+      .boundingClientRect((rect) => {
+        if (rect) {
+          const shouldBeMini = rect.top <= 40; // 在brand-bar进入顶部时，category切换为mini模式
+          if (this.data.isCategoryMini_1 !== shouldBeMini) {
+            this.setData({
+              isCategoryMini_1: shouldBeMini
+            });
+          }
+        }
+      })
+      .exec();
+    wx.createSelectorQuery()
+      .select('.brand-bar-2')
       .boundingClientRect((rect) => {
         if (rect) {
           const shouldBeMini = rect.top <= 40; // 在brand-bar进入顶部时，category切换为mini模式
-          if (this.data.isCategoryMini !== shouldBeMini) {
+          if (this.data.isCategoryMini_2 !== shouldBeMini) {
             this.setData({
-              isCategoryMini: shouldBeMini
+              isCategoryMini_2: shouldBeMini
             });
           }
         }

pages/index/index.wxml

@@ -17,7 +17,7 @@
   </view>
   <!-- <banner position="index" bannerList="{{bannerList}}"/> -->
 
-  <view class="hot-bar">
+  <view class="hot-bar hot-bar-1">
     <view class="hot-A">
       <image src="/images/index/hot-left.png" class="hot-image" bind:tap="hotBut"></image>
     </view>
@@ -28,18 +28,37 @@
       <image src="/images/index/hot-right.png" class="hot-image" bind:tap="presaleBut"></image>
     </view>
   </view>
-  <view class="brand-bar">
+  <view class="brand-bar brand-bar-1">
     <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> -->
     </view>
   </view>
-  <!-- <view class="slider">
-    <view class="slider-item">
-      slider
+  <view class="category category-1 {{isCategoryMini_1 ? 'mini' : ''}}">
+    <view wx:for="{{prodClassList}}" wx:key="index" class="category-item">
+      <image src="{{item.classUrl}}" data-item="{{item}}" class="category-image"></image>
+      <span>{{ item.title }}</span>
+    </view>
+  </view>
+
+  <view class="hot-bar hot-bar-2">
+    <view class="hot-A">
+      <image src="/images/index/hot-left.png" class="hot-image" bind:tap="hotBut"></image>
+    </view>
+    <view class="hot-B">
+      <image src="/images/index/hot-middle.png" class="hot-image" bind:tap="newBut"></image>
+    </view>
+    <view class="hot-C">
+      <image src="/images/index/hot-right.png" class="hot-image" bind:tap="presaleBut"></image>
+    </view>
+  </view>
+  <view class="brand-bar brand-bar-2">
+    <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> -->
     </view>
-  </view> -->
-  <view class="category {{isCategoryMini ? 'mini' : ''}}">
+  </view>
+  <view class="category category-2 {{isCategoryMini_2 ? 'mini' : ''}}">
     <view wx:for="{{prodClassList}}" wx:key="index" class="category-item">
       <image src="{{item.classUrl}}" data-item="{{item}}" class="category-image"></image>
       <span>{{ item.title }}</span>

pages/index/index.wxss

@@ -25,7 +25,7 @@ page {
   display:block;
 }
 
-.hot-bar {
+.hot-bar, .hot-bar-1, .hot-bar-2 {
   padding: 14rpx 30rpx 10rpx;
   display: flex;
   flex-direction: row;
@@ -37,7 +37,7 @@ page {
   width: 220rpx;
   height: 300rpx;
 }
-.brand-bar {
+.brand-bar, .brand-bar-1, .brand-bar-2 {
   padding: 14rpx 30rpx 10rpx;
   display: flex;
   flex-direction: row;
@@ -67,7 +67,7 @@ page {
   display: block;
   border-radius: 25rpx;
 }
-.category {
+.category, .category-1, .category-2 {
   position: relative;
   height: 300rpx;
   margin: 14rpx 30rpx 10rpx 30rpx;
@@ -87,12 +87,17 @@ page {
 .category.mini {
   position: fixed; /* 固定在页面顶部 */
   z-index: 1000;
-  top: 0px; 
   height: 80rpx;
   padding: 0 20rpx;
   flex-wrap: nowrap;
   overflow-x: auto;
 }
+.category-1.mini {
+  top: 160rpx;
+}
+.category-2.mini {
+  top: 250rpx;
+}
 
 .category.mini .category-item {
   width: auto;