Refactor(首页):优化渲染加载速度

pages/home/index.vue

@@ -517,6 +517,7 @@ export default {
     }
   },
   onLoad() {
+    console.clear()
     console.time()
     // uni.hideTabBar()
     const _this = this
@@ -553,7 +554,11 @@ export default {
     this.pageToHideHandle()
   },
   onPageScroll(e) {
-    this.scrollTop = e.scrollTop
+    if (this.pageScrollTimer) return
+    this.pageScrollTimer = setTimeout(() => {
+      this.pageScrollTimer = null
+      this.scrollTop = e.scrollTop
+    }, 50)
   },
   onShareTimeline() {
     uni.updateShareMenu({ 
@@ -636,20 +641,24 @@ export default {
     },
     onscroll(e) {
       this.scrollViewWidth = e.detail.scrollWidth
-      const imgs = []
-      this.getElementData(`#${this.scrollView}`, res=>{
-        this.setFunctionGuideData({
-          imgs: this.imgs,
-          btnGroupPosition: '20rpx',
-          tipsPosition: '',
-          position: {
-            top: res.top + 'px',
-            left: res.left + 'px',
-            width:  `${res.height}px`,
-            height: `${res.height}px`
-          }
+      if (this.scrollTimer) return
+      this.scrollTimer = setTimeout(() => {
+        this.scrollTimer = null
+        this.getElementData(`#${this.scrollView}`, res => {
+          if (!res) return
+          this.setFunctionGuideData({
+            imgs: this.imgs,
+            btnGroupPosition: '20rpx',
+            tipsPosition: '',
+            position: {
+              top: res.top + 'px',
+              left: res.left + 'px',
+              width:  `${res.height}px`,
+              height: `${res.height}px`
+            }
+          })
         })
-      })
+      }, 100)
     },
     toEle(id, imgs) {
       this.getElementData(`#${id}`, res=>{
@@ -739,6 +748,9 @@ export default {
       getHomeData({ cityName: this.cityName }).then(res => {
         const { success, data } = res
         if (success && data) {
+          console.timeEnd()
+          console.log('^^^^^^^^^^^^^^^^接口响应之后开始')
+          console.time()
           _this.$set(_this, 'banner', data.banner || [])
           _this.$set(_this, 'menus', data.menus || [])
           _this.$set(_this, 'landmarkGoodsImage', data.landmarkGoodsImage || {})
@@ -758,28 +770,32 @@ export default {
           _this.lotteryCanDraw = data.lotteryCanDraw || false
           _this.initPosterPopupState(data)
           if (data.bastList) {
+            const newBastLeftList = []
+            const newBastRightList = []
             for (let i = 0; i < data.bastList.length; i++) {
               if (i % 2 === 0) {
                 // 店铺排名
                 if (i === 4 && data.hotelList.length > 0) {
-                  _this.bastLeftList.push({
+                  newBastLeftList.push({
                     type: 'hotel',
                     list: data.hotelList
                   })
                 }
-                _this.bastLeftList.push(data.bastList[i])
+                newBastLeftList.push(data.bastList[i])
               }
               if (i % 2 === 1) {
                 // 尖货专题
                 if (i === 3 && data.contentBest.length > 0) {
-                  _this.bastRightList.push({
+                  newBastRightList.push({
                     type: 'swiper',
                     list: data.contentBest
                   })
                 }
-                _this.bastRightList.push(data.bastList[i])
+                newBastRightList.push(data.bastList[i])
               }
             }
+            _this.$set(_this, 'bastLeftList', newBastLeftList)
+            _this.$set(_this, 'bastRightList', newBastRightList)
           }
           this.$nextTick(() => {
             console.timeEnd()