分类分页查询

app.json

@@ -1,12 +1,13 @@
 {
   "pages": [
+      
+      "pages/Mall/sortCommodity/sortCommodity",
       "pages/index/index",
       "pages/all/all",
       "pages/cart/cart",
       "pages/my/my",
       "pages/detail/detail",
       "pages/login/login",
-      "pages/Mall/sortCommodity/sortCommodity",
       "pages/Mall/presaleCommodity/presaleCommodity",
       "pages/Mall/newCommodity/newCommodity",
       "pages/Mall/hotCommodity/hotCommodity"

components/product-list/product-list.js

@@ -10,51 +10,20 @@ Component({
         position:{
             type:String,
             value:''
+        },
+        filterObj:{
+            type:Object,
+            value:{}
+        }
+    },
+    observers:{
+        "filterObj": function(newVal){
+           this.getClassifyCommodity();
         }
     },
     data: {
-        goodsList: [
-            {
-            name: "哪吒魔童闹海周边哪吒魔童闹海周边哪吒魔童闹海周边",
-            price: 49.5,
-            image:'/images/index/hot-item.png'
-            },
-            {
-            name: "若来十二生肖盲盒 桌面手办若来十二生肖盲盒 桌面手办若来十二生肖盲盒 桌面手办",
-            price: 49.5,
-            image:'/images/index/hot-item.png'
-            },
-            {
-            name: "官方正版姜子牙电影四不像",
-            price: 49.5,
-            image:'/images/index/hot-item.png'
-            },
-            {
-            name: "若来十二生肖盲盒 十二节气祖国版",
-            price: 49.5,
-            image:'/images/index/hot-item.png'
-            },
-            {
-                name: "哪吒魔童闹海周边哪吒魔童闹海周边哪吒魔童闹海周边",
-                price: 49.5,
-                image:'/images/index/hot-item.png'
-            },
-            {
-                name: "若来十二生肖盲盒 桌面手办若来十二生肖盲盒 桌面手办若来十二生肖盲盒 桌面手办",
-                price: 49.5,
-                image:'/images/index/hot-item.png'
-            },
-            {
-                name: "官方正版姜子牙电影四不像",
-                price: 49.5,
-                image:'/images/index/hot-item.png'
-            },
-            {
-                name: "若来十二生肖盲盒 十二节气祖国版",
-                price: 49.5,
-                image:'/images/index/hot-item.png'
-            },
-        ],
+        goodsList: [],
+        pageNum:1,
     },
     methods: {
         // 获取今日热门商品列表
@@ -86,11 +55,37 @@ Component({
                     })
                 }
             })
-        }
+        },
+        // 获取分类商品
+        getClassifyCommodity(){
+            let data = {
+                ...this.data.filterObj,
+                pageNum:this.data.pageNum,
+                pageSize:5
+            }
+            API.getProdsList(data).then(res=>{
+                if(res){
+                    this.setData({
+                        goodsList:this.data.pageNum === 1?res.mercProdList:[...this.data.goodsList,...res.mercProdList]
+                    })
+                }
+            })
+        },
+        // 观察滚动触底事件
+        onReachBottom(e){
+            this.setData({
+                pageNum:this.data.pageNum+1
+            });
+            this.observerFunction();
+        },
+        observerFunction(){
+            if(this.data.position === 'hot') this.getHotCommodity();
+            if(this.data.position === 'new') this.getNewCommodity();
+            if(this.data.position === 'presale') this.getPresaleCommodity();
+            if(this.data.position === 'sort') this.getClassifyCommodity();
+        },
     },
     ready: function(){
-        if(this.data.position === 'hot') this.getHotCommodity();
-        if(this.data.position === 'new') this.getNewCommodity();
-        if(this.data.position === 'presale') this.getPresaleCommodity();
+        this.observerFunction();
     }
 })

components/product-list/product-list.wxml

@@ -1,5 +1,5 @@
 <!--components/product-list/product-list.wxml-->
-<scroll-view class="scrollView {{position === 'index'&&'scrollViewIndex'}}" scroll-y>
+<scroll-view class="scrollView {{position === 'index'&&'scrollViewIndex'}}" scroll-y bindscrolltolower="onReachBottom">
     <view class="products">
         <view class="goods-item" wx:for="{{goodsList}}" wx:key="index">
             <view class="goods-image">

components/product-list/product-list.wxss

@@ -1,6 +1,6 @@
 /* components/product-list/product-list.wxss */
 .scrollView{
-    height: calc(100vh - 330rpx);
+    height: calc(100vh - 550rpx);
 }
 .scrollViewIndex{
     height: 1080rpx;

pages/Mall/sortCommodity/sortCommodity.js

@@ -11,15 +11,20 @@ Page({
     ipInfoList:[
         {ipName:'全部',ipId:''}
     ],
-    filterIndex1:0,
-    filterIndex2:0
+    filterIndex1:-1,
+    filterIndex2:-1,
+    filterObj:{} //筛选条件
   },
 
   // 监听筛选
   selectFilter(e){
       let {index,index2,item} = e.currentTarget.dataset;
+      let filterObj = this.data.filterObj;
+      if(index === 0) filterObj.ipId = item.ipId;
+      if(index === 1) filterObj.prodClassId = item.prodClassId;
       this.setData({
           [index === 0?'filterIndex1':'filterIndex2']:index2,
+          filterObj
       })
   },
 

pages/Mall/sortCommodity/sortCommodity.wxml

@@ -29,4 +29,4 @@
 </view>
 
 <!-- 商品列表 -->
-<product-list position="sort"></product-list>
+<product-list position="sort" filterObj="{{filterObj}}"></product-list>

pages/Mall/sortCommodity/sortCommodity.wxss

@@ -1,6 +1,6 @@
 /* pages/Mall/sortCommodity/sortCommodity.wxss */
 .sortView{
-    padding: 0 20px;
+    padding: 0 20px 10px 20px;
 }
 .sortView .filterCriteria{
     height: 65rpx;

project.private.config.json

@@ -1,24 +1,24 @@
-{
-    "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
-    "projectname": "GululuQ-mp",
-    "setting": {
-        "compileHotReLoad": true,
-        "urlCheck": false,
-        "coverView": true,
-        "lazyloadPlaceholderEnable": false,
-        "skylineRenderEnable": false,
-        "preloadBackgroundData": false,
-        "autoAudits": false,
-        "useApiHook": true,
-        "useApiHostProcess": true,
-        "showShadowRootInWxmlPanel": true,
-        "useStaticServer": false,
-        "useLanDebug": false,
-        "showES6CompileOption": false,
-        "checkInvalidKey": true,
-        "ignoreDevUnusedFiles": true,
-        "bigPackageSizeSupport": false
-    },
-    "libVersion": "3.8.0",
-    "condition": {}
+{
+    "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
+    "projectname": "GululuQ-mp",
+    "setting": {
+        "compileHotReLoad": true,
+        "urlCheck": false,
+        "coverView": true,
+        "lazyloadPlaceholderEnable": false,
+        "skylineRenderEnable": false,
+        "preloadBackgroundData": false,
+        "autoAudits": false,
+        "useApiHook": true,
+        "useApiHostProcess": true,
+        "showShadowRootInWxmlPanel": true,
+        "useStaticServer": false,
+        "useLanDebug": false,
+        "showES6CompileOption": false,
+        "checkInvalidKey": true,
+        "ignoreDevUnusedFiles": true,
+        "bigPackageSizeSupport": false
+    },
+    "libVersion": "3.8.3",
+    "condition": {}
 }

service/api.js

@@ -222,4 +222,8 @@ export const API = {
       ...payload,
     });
   },
+ // 获取商品列表
+ getProdsList: function(payload = {}){
+     return http.post("/api/store/homepage/prods",payload)
+ }
 }