update: 调试商品滚动白屏问题，改动不大，问题可能没解决，电脑重现不了

view/xcx/pages/index/index.js

@@ -24,11 +24,12 @@ import {
 } from '../../api/activity.js';
 
 import Util from '../../utils/util.js';
+import d from '../../utils/d.js';
 
 const CATE_BLACKHOLE_ID = 199
 const PAGE_LIMIT = 20
-const THROTTLE_TIME = 100
-const HEIGHT_OF_ROW = 500 // 摘抄自 css, 商品高度,包含图片文字 margin.
+const THROTTLE_TIME = 100 // 滚动回调限流 ms
+const HEIGHT_OF_ROW = 500 // 摘抄自 css, 商品高度,包含图片文字 margin. rpx
 const ITEM_NUM_OF_ROW = 2 // 设计为一行 2 个元素
 
 Page({
@@ -79,8 +80,8 @@ Page({
         iShidden: true, // 是否隐藏；
         isGoIndex: false, // 是否返回首页；
         recommend: {
-            loadend: false,
-            loading: false,
+            loadend: false, // 已全部加载
+            loading: false, // 正在加载
             loadTitle: '加载更多',
             page: 1,
             limit: 20,
@@ -106,6 +107,7 @@ Page({
         liveInfo: {}
     },
 
+    // 关闭提示添加到小程序窗口
     closeTip: function () {
         wx.setStorageSync('msg_key', true);
         this.setData({
@@ -124,20 +126,27 @@ Page({
      * 生命周期函数--监听页面加载
      */
     onLoad: function (options) {
+        // 由分享链接跳转过来
+        // a === 'share'
+        // id 商品ID
+        // spid spread_id
         if (options.a && options.a == 'share' && options.id && options.spid) {
             wx.navigateTo({
                 url: '/pages/goods_details/index?id=' + options.id + '&spid=' + options.spid,
             })
         }
+        // 获取 nav 高度等信息
         let query = wx.createSelectorQuery()
         query.select('.indexs').boundingClientRect((rect) => {
             let width = rect.width
-            let ratio = 750 / width
+            let ratio = 750 / width // px -> rpx 需要乘以的数
             this.setData({
                 rowPxHeight: Math.floor(this.data.rowHeight / ratio),
                 navH: app.globalData.navHeight,
                 navPxH: Math.floor(app.globalData.navHeight / ratio),
             })
+            d.debug('width:', width, 'ratio:', ratio)
+            d.debug('rowHeight:', this.data.rowPxHeight, 'navH:', this.data.navH, 'navPxH:', this.data.navPxH)
         }).exec()
 
         wxh.selfLocation(1);
@@ -145,9 +154,6 @@ Page({
         // this.getCoupon();
         this.get_hot_product();
         // this.get_product_list();
-        this.setData({
-            navH: app.globalData.navHeight
-        });
         if (options.spid) {
             app.globalData.spid = options.spid;
         }
@@ -170,7 +176,9 @@ Page({
                 if (res.data) {
                     wx.setStorageSync(CACHE_SUBSCRIBE_MESSAGE, JSON.stringify(res.data));
                 }
-            }).catch(() => {})
+            }).catch(err => {
+                d.error('err:', err)
+            })
         }
     },
 
@@ -269,13 +277,13 @@ Page({
                     liveList: res.data
                 });
             }
-        }).catch(res => {
-
+        }).catch(err => {
+            d.error('error:', err)
         })
     },
 
     /**
-     * 商品详情跳转
+     * 商品详情跳转 商品点击事件
      */
     goDetailType: function (e) {
         let item = e.currentTarget.dataset.items
@@ -304,8 +312,10 @@ Page({
     get_hot_product: function (isReload) {
         if (this.data.recommend.loadend) return;
         if (this.data.recommend.loading) return;
+
         if (isReload) {
             this.setData({
+                'recommend.page': 1,
                 hotProducts: []
             });
         }
@@ -337,8 +347,11 @@ Page({
     /** 点击上方活动标签按钮 */
     onTapCategoryTabItem: function (event) {
         let tabIndex = event.detail.index;
+        d.debug('this.data.prodCates.children.length:', this.data.prodCates.children.length, 'current tab index:', tabIndex)
+        // 不能过界 0 是主场，不包含在 prodCates 内, 
+        // 主场不处理
         if (tabIndex <= 0 || tabIndex > this.data.prodCates.children.length) {
-            console.log(1)
+            d.debug('tab index out of range:', tabIndex)
             this.setData({
                 activeTabIndex: tabIndex
             })
@@ -358,13 +371,14 @@ Page({
 
             var _ = this.data.cpnMine && this.data.cpnMine.show()
             return
-        } else {
-            var _ = this.data.cpnMine && this.data.cpnMine.hide()
         }
 
+        var _ = this.data.cpnMine && this.data.cpnMine.hide()
+
         this.setData({
             activeTabIndex: tabIndex
         })
+
         // 首屏
         if (this.data.prodCates.children[tabIndex - 1].page <= 1) {
             this.get_product_list(tabIndex);
@@ -374,32 +388,29 @@ Page({
         })
     },
 
-    // productTap: function (e) {
-    //     let index = e.currentTarget.dataset.indexn;
-    //     this.setData({
-    //         'where.page': 1,
-    //         loadend: false,
-    //         loading: false,
-    //         'where.sid': this.data.prodCates[this.data.activeTabIndex - 1].children[index].id
-    //     })
-    //     this.get_product_list(true);
-    // },
-
+    // 获取商品列表
+    // @tabIndex 活动标签 @isReload 是否重新加载
     get_product_list: function (tabIndex, isReload) {
+        // 不处理主场和黑洞星球
         if (tabIndex <= 0 || tabIndex > this.data.prodCates.children.length) {
+            d.debug('invalid tab index:', tabIndex)
             return
         }
+        // 大类 ID
         let cid = this.data.prodCates.id
+        // 子类
         let act = this.data.prodCates.children[tabIndex - 1]
 
         if (act.loading) return
         if (act.loaded && !isReload) return
 
-        let cindex = tabIndex - 1
+        let cindex = tabIndex - 1 // tab index 转换到 数据的 index
         if (isReload) {
             this.setData({
                 [`prodCates.children[${cindex}].page`]: 1,
-                [`prodCates.children[${cindex}].products`]: []
+                [`prodCates.children[${cindex}].products`]: [],
+                [`prodCates.children[${cindex}].aboveShowRowIndex`]: 0,
+                [`prodCates.children[${cindex}].belowShowRowNum`]: 0
             })
         }
 
@@ -418,16 +429,16 @@ Page({
             let list = [] // res.data
             // 过滤产品列表, 只保留本页用的字段
             let counter = act.products.length
-            res.data.forEach((item) => {
+            res.data.forEach((prod) => {
                 counter += 1
                 list.push({
-                    id: item.id,
-                    image: item.image,
-                    activity: item.activity,
-                    store_name: item.store_name,
-                    price: item.price,
-                    vip_price: item.vip_price,
-                    sales: item.sales,
+                    id: prod.id,
+                    image: prod.image,
+                    activity: prod.activity,
+                    store_name: prod.store_name,
+                    price: prod.price,
+                    vip_price: prod.vip_price,
+                    sales: prod.sales,
                     isShow: (counter / 2 - act.aboveShowRowIndex) <= 2 * this.data.rowCacheNum, // 是否显示
                 })
             })
@@ -442,7 +453,7 @@ Page({
                 [`prodCates.children[${cindex}].page`]: act.page + 1
             });
         }).catch(err => {
-            console.log(err)
+            d.error(err)
             that.setData({
                 [`prodCates.children[${cindex}].loading`]: false,
                 [`prodCates.children[${cindex}].loadTitle`]: '加载更多'
@@ -509,14 +520,16 @@ Page({
     //     }).catch(() => {});
     // },
 
-    /** 获取分类列表 */
+    // 获取分类列表 
     getCategoryData: function () {
         let that = this;
         getCategoryList().then(res => {
+
             let cates = res.data.length > 0 ? res.data[0] : {}
             that.setData({
                 prodCates: that._rebuildProdCates(cates)
             })
+            d.debug(this.data.prodCates)
         });
     },
 
@@ -535,7 +548,7 @@ Page({
             cate.page = 1 // 当前第几页
             cate.scrollPos = 0 // 上次滚动条位置
             cate.aboveShowRowIndex = 0 // 可见区域上部行索引
-            cate.belowShowRowNum = 0    // 底部隐藏行数
+            cate.belowShowRowNum = 0 // 底部隐藏行数
         })
         return cates;
     },
@@ -618,16 +631,18 @@ Page({
      */
     onPullDownRefresh: function () {
         let tabIndex = this.data.activeTabIndex
+        // 主场刷新
+        // 其他场刷新
         if (tabIndex == 0) {
             this.getIndexConfig();
-        } else if (tabIndex > this.data.prodCates.children.length) { 
-
+        } else if (tabIndex > this.data.prodCates.children.length) {
+            d.error('invalid tab index:', tabIndex)
         } else {
             if (!this.data.prodCates.children[tabIndex - 1].id == CATE_BLACKHOLE_ID) {
                 this.get_product_list(tabIndex, true)
             }
         }
-
+        this.get_hot_product(true)
         wx.stopPullDownRefresh();
     },
 
@@ -635,27 +650,42 @@ Page({
      * 页面上拉触底事件的处理函数
      */
     onReachBottom: function () {
-        this.get_hot_product();
-        this.get_product_list(this.data.activeTabIndex);
+        let tabIndex = this.data.activeTabIndex
+        // 主场只加载热门
+        // 其他场加载商品列表
+        if (tabIndex == 0) {
+            this.get_hot_product();
+        } else if (tabIndex > 0 &&
+            tabIndex <= this.data.prodCates.children.length &&
+            this.data.prodCates.children[tabIndex - 1].id != CATE_BLACKHOLE_ID) {
+            this.get_product_list(this.data.activeTabIndex);
+            if (this.data.prodCates.children[tabIndex - 1].loadend) {
+                this.get_hot_product();
+            }
+        }
     },
 
     onPageScroll: throttle(function (obj) {
-        if (this.data.activeTabIndex <= 0 || this.data.activeTabIndex > this.data.prodCates.children.length) {
+        let tabIndex = this.data.activeTabIndex
+        if (tabIndex <= 0 ||
+            tabIndex > this.data.prodCates.children.length ||
+            this.data.prodCates.children[tabIndex - 1].id == CATE_BLACKHOLE_ID) {
+            d.debug('ignore tab scroll event. tab index:', tabIndex)
             return
         }
 
-        let pos = obj[0].scrollTop
+        let pos = obj[0].scrollTop //
         let calcPos = pos //- this.data.navPxH
         calcPos = calcPos > 0 ? calcPos : 0
         let rowNum = Math.floor(calcPos / this.data.rowPxHeight) // 滚动过去的总行数, 也是当前 viewport 的开始索引位置
-        let clearRowNum = rowNum - this.data.rowCacheNum// 隐藏总行数
+        let clearRowNum = rowNum - this.data.rowCacheNum // 隐藏总行数
 
-        let cindex = this.data.activeTabIndex - 1
+        let cindex = tabIndex - 1
         let tabData = this.data.prodCates.children[cindex]
-        // console.log('pos:', pos, 'rowPxHeight', this.data.rowPxHeight,
-        //     'rowNum:', rowNum, 'clearRowNum:', clearRowNum, 'aboveShowRowIndex:', tabData.aboveShowRowIndex)
         let changingData = {}
         if (pos - tabData.scrollPos > 0) { // 向下
+            // d.debug('DOWN pos:', pos, 'rowPxHeight', this.data.rowPxHeight,
+            //     'rowNum:', rowNum, 'clearRowNum:', clearRowNum, 'aboveShowRowIndex:', tabData.aboveShowRowIndex)
             if (clearRowNum > 0) {
                 // aboveShowRowIndex 索引的行之前都不显示
                 for (let i = tabData.aboveShowRowIndex; i < clearRowNum; i++) {
@@ -671,6 +701,8 @@ Page({
                 }
             }
         } else { // 向上
+            // d.debug('UP pos:', pos, 'rowPxHeight', this.data.rowPxHeight,
+            //     'rowNum:', rowNum, 'clearRowNum:', clearRowNum, 'aboveShowRowIndex:', tabData.aboveShowRowIndex)
             if (clearRowNum >= 0) {
                 for (let i = tabData.aboveShowRowIndex - 1; i >= clearRowNum; i--) {
                     let leftIndex = i * 2
@@ -697,7 +729,8 @@ Page({
             }
         } //
         clearRowNum = clearRowNum > 0 ? clearRowNum : 0;
-        if (clearRowNum >= 0 && !(clearRowNum > 0 && clearRowNum == tabData.aboveShowRowIndex)) {
+        if (clearRowNum >= 0 &&
+            !(clearRowNum > 0 && clearRowNum == tabData.aboveShowRowIndex)) {
             changingData[[`prodCates.children[${cindex}].aboveShowRowIndex`]] = clearRowNum
 
             let belowShowRowNum = tabData.products.length / 2 - (2 * this.data.rowCacheNum + clearRowNum)
@@ -737,8 +770,8 @@ Page({
             }
             all.push(i)
         }
-        console.debug('all:', all)
-        console.debug('display:', display)
+        d.debug('all:', all)
+        d.debug('display:', display)
     },
 
     /**

view/xcx/utils/d.js

@@ -0,0 +1,43 @@
+const levels = {
+    0: 'trace',
+    1: 'debug',
+    2: 'info',
+    3: 'error',
+}
+
+// 记录调试信息，可以通过修改标志关闭
+var d = {
+    level: 3,
+
+    trace: function (message, ...parts) {
+        if (this.level >= this.trace) {
+            console.log(message, ...parts)
+        }
+    },
+
+    debug: function (message, ...parts) {
+        if (this.level <= 1) {
+            console.log(message, ...parts)
+        }
+    },
+
+    log: function (message, ...parts) {
+        if (this.level <= 2) {
+            console.log(message, ...parts)
+        }
+    },
+
+    error: function (message, ...parts) {
+        if (this.level <= 3) {
+            console.log(message, ...parts)
+        }
+    },
+
+    info: null,
+}
+
+d.info = d.log
+
+console.log('current level:', levels[d.level])
+
+module.exports = d