修改首页缩小化

pages/index/index.js

@@ -12,8 +12,8 @@ Page({
     showAddCartModal: false,
     currentProduct: null,
 
-    isCategoryMini_1: false,
-    isCategoryMini_2: false
+    isBrandMini: false,
+    isCategoryMini: false
   },
   // 显示商品属性模态框
   showAddCartModal(e) {
@@ -53,56 +53,62 @@ Page({
     console.log("onLoad");
     console.log('App.globalData', App.globalData);
 
-    // const resBanner = await API.getBanners({});
-    // console.log('resBanner', resBanner);
-    // this.setData({
-    //   bannerList : resBanner.bannerList
-    // });
+    const resBanner = await API.getBanners({});
+    console.log('resBanner', resBanner);
+    this.setData({
+      bannerList : resBanner.bannerList
+    });
 
-    // const resBrand = await API.getIpInfos({});
-    // console.log('resBrand', resBrand);
-    // this.setData({
-    //   ipInfoList : resBrand.ipInfoList
-    // });
-    // const resCategory = await API.getProdClasses({});
-    // console.log('resCategory', resCategory);
-    // this.setData({
-    //   prodClassList : resCategory.prodClassList
-    // });
+    const resBrand = await API.getIpInfos({});
+    console.log('resBrand', resBrand);
     this.setData({
-        prodClassList: [
-          { classUrl: 'someprod.jpg', title: '火影忍者' },
-          { classUrl: 'someprod.jpg', title: '初音' },
-          { classUrl: 'someprod.jpg', title: '原神' },
-          { classUrl: 'someprod.jpg', title: '柯南' },
-          { classUrl: 'someprod.jpg', title: '非人哉' },
-          { classUrl: 'someprod.jpg', title: '全部' },
-        ]
-      });
+      ipInfoList : resBrand.ipInfoList
+    });
+    const resCategory = await API.getProdClasses({});
+    console.log('resCategory', resCategory);
+    this.setData({
+      prodClassList : resCategory.prodClassList
+    });
+    // this.setData({
+    //     prodClassList: [
+    //       { classUrl: 'someprod.jpg', title: '火影忍者' },
+    //       { classUrl: 'someprod.jpg', title: '初音' },
+    //       { classUrl: 'someprod.jpg', title: '原神' },
+    //       { classUrl: 'someprod.jpg', title: '柯南' },
+    //       { classUrl: 'someprod.jpg', title: '非人哉' },
+    //       { classUrl: 'someprod.jpg', title: '全部' },
+    //     ]
+    //   });
   },
 
   onPageScroll: function(e) {
     wx.createSelectorQuery()
-      .select('.brand-bar-1')
+      .select('.brand-bar')
       .boundingClientRect((rect) => {
+        console.log("brandrecttop111");
         if (rect) {
-          const shouldBeMini = rect.top <= 40; // 在brand-bar进入顶部时，category切换为mini模式
-          if (this.data.isCategoryMini_1 !== shouldBeMini) {
+          const shouldBrandBeMini = rect.top <= 40; // 在brand-bar进入顶部时，category切换为mini模式
+          console.log("brandrecttop:" + rect.top);
+          console.log("shouldBrandBeMini" + shouldBrandBeMini);
+          if (this.data.isBrandMini !== shouldBrandBeMini) {
             this.setData({
-              isCategoryMini_1: shouldBeMini
+              isBrandMini: shouldBrandBeMini
             });
           }
         }
       })
       .exec();
     wx.createSelectorQuery()
-      .select('.brand-bar-2')
+      .select('.category')
       .boundingClientRect((rect) => {
+        console.log("categoryrecttop111");
         if (rect) {
-          const shouldBeMini = rect.top <= 40; // 在brand-bar进入顶部时，category切换为mini模式
-          if (this.data.isCategoryMini_2 !== shouldBeMini) {
+          const shouldCategoryBeMini = rect.top <= 40; // 在category进入顶部时，category切换为mini模式
+          console.log("categoryrecttop:" + rect.top);
+          console.log("shouldCategoryBeMini" + shouldCategoryBeMini);
+          if (this.data.isCategoryMini !== shouldCategoryBeMini) {
             this.setData({
-              isCategoryMini_2: shouldBeMini
+              isCategoryMini: shouldCategoryBeMini
             });
           }
         }

pages/index/index.wxml

@@ -17,7 +17,7 @@
   </view>
   <!-- <banner position="index" bannerList="{{bannerList}}"/> -->
 
-  <view class="hot-bar hot-bar-1">
+  <view class="hot-bar">
     <view class="hot-A">
       <image src="/images/index/hot-left.png" class="hot-image" bind:tap="hotBut"></image>
     </view>
@@ -28,40 +28,17 @@
       <image src="/images/index/hot-right.png" class="hot-image" bind:tap="presaleBut"></image>
     </view>
   </view>
-  <view class="brand-bar brand-bar-1">
+  <view class="brand-bar {{isBrandMini ? 'mini' : ''}}">
     <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> -->
+      <text class="brand-name">{{item.name}}</text>
+      <span>{{ item.className }}</span>
     </view>
   </view>
-  <view class="category category-1 {{isCategoryMini_1 ? 'mini' : ''}}">
+  <view class="category {{isCategoryMini ? '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 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>
+      <span>{{ item.className }}</span>
     </view>
   </view>
 

pages/index/index.wxss

@@ -25,7 +25,7 @@ page {
   display:block;
 }
 
-.hot-bar, .hot-bar-1, .hot-bar-2 {
+.hot-bar {
   padding: 14rpx 30rpx 10rpx;
   display: flex;
   flex-direction: row;
@@ -37,14 +37,28 @@ page {
   width: 220rpx;
   height: 300rpx;
 }
-.brand-bar, .brand-bar-1, .brand-bar-2 {
-  padding: 14rpx 30rpx 10rpx;
+.brand-bar {
+  /* padding: 14rpx 30rpx 10rpx; */
+  margin: 14rpx 30rpx 10rpx 30rpx;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
+  position: relative;
+  height: 300rpx;
+  padding: 20rpx;
+  transition: all 0.3s ease;
 }
+.brand-bar.mini {
+  position: fixed; /* 固定在页面顶部 */
+  z-index: 1100;
+  height: 80rpx;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  top: 160rpx;
+}
+
 .brand-bar .brand-item {
   width: 120rpx;
   height: 120rpx;
@@ -54,6 +68,25 @@ page {
   width: 100%;
   height: 100%;
 }
+
+.brand-bar.mini .brand-item {
+  width: auto;
+  height: 80rpx;
+  margin: 0 20rpx;
+  display: flex;
+  align-items: center;
+}
+
+.brand-bar.mini .brand-item .brand-image {
+  display: none;
+}
+
+.brand-bar.mini .brand-item span {
+  display:block;
+  font-size: 28rpx;
+  color: #097561;
+}
+
 .slider {
   display: flex;
   justify-content: center;
@@ -67,7 +100,8 @@ page {
   display: block;
   border-radius: 25rpx;
 }
-.category, .category-1, .category-2 {
+
+.category {
   position: relative;
   height: 300rpx;
   margin: 14rpx 30rpx 10rpx 30rpx;
@@ -91,11 +125,6 @@ page {
   padding: 0 20rpx;
   flex-wrap: nowrap;
   overflow-x: auto;
-}
-.category-1.mini {
-  top: 160rpx;
-}
-.category-2.mini {
   top: 250rpx;
 }
 
@@ -112,6 +141,7 @@ page {
 }
 
 .category.mini .category-item span {
+  display:block;
   font-size: 28rpx;
   color: #097561;
 }
@@ -129,4 +159,7 @@ page {
   width: 100%;
   height: 124rpx;
   background-color: #57c6b1;
-}
+}
+.category .category-item span {
+  display: none;
+}