滚动变形的动态效果

components/product-list/product-list.wxss

@@ -3,7 +3,7 @@
     height: calc(100vh - 550rpx);
 }
 .scrollViewIndex{
-    height: 1080rpx;
+    height: 2080rpx;
 }
 .products{
     padding:0 30rpx;

pages/index/index.js

@@ -10,7 +10,8 @@ Page({
     ipInfoList: [],
     prodClassList: [],
     showAddCartModal: false,
-    currentProduct: null
+    currentProduct: null,
+    isCategoryMini: false
   },
   // 显示商品属性模态框
   showAddCartModal(e) {
@@ -50,22 +51,47 @@ 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);
+    // 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
+    // });
     this.setData({
-      prodClassList : resCategory.prodClassList
-    });
-
+        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('.category')
+      .boundingClientRect((rect) => {
+        if (rect) {
+          const shouldBeMini = rect.top <= 120; // 在高度小于120时，切换为 mini 模式
+          if (this.data.isCategoryMini !== shouldBeMini) {
+            this.setData({
+              isCategoryMini: shouldBeMini
+            });
+          }
+        }
+      })
+      .exec();
+  }
 })

pages/index/index.wxml

@@ -39,11 +39,13 @@
       slider
     </view>
   </view> -->
-  <view class="category">
+  <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>
+  isCategoryMini {{ isCategoryMini }}
 
   <!-- 商品列表 -->
   <product-list position="index" bindaddCart="showAddCartModal"></product-list>

pages/index/index.wxss

@@ -70,7 +70,8 @@ page {
 .category {
   height: 300rpx;
   margin: 14rpx 30rpx 10rpx 30rpx;
-  border: 1px solid #dfefec;
+  border: 1px solid #097561;
+  background-color: #cdf3ec;
   border-radius: 25rpx;
   padding: 20rpx;
   display: flex;
@@ -78,13 +79,45 @@ page {
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
+  transition: all 0.3s ease;
+}
+
+/* mini 模式的css */
+.category.mini {
+  height: 80rpx;
+  padding: 0 20rpx;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+}
+
+.category.mini .category-item {
+  width: auto;
+  height: 80rpx;
+  margin: 0 20rpx;
+  display: flex;
+  align-items: center;
 }
+
+.category.mini .category-item .category-image {
+  display: none;
+}
+
+.category.mini .category-item span {
+  font-size: 28rpx;
+  color: #097561;
+}
+/* mini 模式的css 结束 */
+
+
 .category .category-item {
   width: 144rpx;
-  height: 144rpx;
-  margin-bottom: 20rpx;
+  height: 174rpx;
+  margin-bottom: 0rpx;
+  font-size: 28rpx;
+  text-align: center;
 }
 .category .category-item .category-image {
   width: 100%;
-  height: 100%;
+  height: 124rpx;
+  background-color: #57c6b1;
 }