商品详情tab点击跳转偶尔卡机bug

common/common.js

@@ -159,22 +159,31 @@ export function throttle(fn, gapTime) {
     }
 }
 
-export function debounce(fn, delay, isImmediate) {
-    var timer = null //初始化timer，作为计时清除依据
-    return function() {
-        var context = this //获取函数所在作用域this
-        var args = arguments //取得传入参数
-        clearTimeout(timer)
-        if (isImmediate && timer === null) {
-            //时间间隔外立即执行
-            fn.apply(context, args)
-            timer = 0
-            return
+/**
+ * 防抖
+ * @param {Function} func 需要包装的函数
+ * @param {string} wait 等待执行时间
+ * @param {string} immediate 是否是立即执行 默认不立即执行
+ * @returns {Function} 返回包装后的函数
+ */
+export function debounce(func, wait, immediate) {
+    let timeout, result
+    return function () {
+        const context = this
+        const args = arguments
+        if (timeout) clearTimeout(timeout)
+        if (immediate) {
+            const callNow = !timeout
+            timeout = setTimeout(function () {
+                timeout = null
+            }, wait)
+            if (callNow) result = func.apply(context, args)
+        } else {
+            timeout = setTimeout(function () {
+                func.apply(context, args)
+            }, wait)
         }
-        timer = setTimeout(function() {
-            fn.apply(context, args)
-            timer = null
-        }, delay)
+        return result
     }
 }
 
@@ -200,8 +209,7 @@ const install = Vue => {
         hidePhone,
         interceptHtmlFn,
         desensitizationName,
-        throttle,
-        debounce
+        throttle
     }
 }
 

pages/goods/product-detail.vue

@@ -4,7 +4,7 @@
         <template v-else>
             <!-- 顶部tabs -->
             <tui-tabs
-                v-show="scrollTop > 40"
+                v-show="scrollTop > 40 && showTabs"
                 class="fixed"
                 :tabs="tabs"
                 :currentTab="currentTab"
@@ -96,6 +96,7 @@ import CmCouponList from '@/components/cm-module/cm-coupon-list/cm-coupon-list'
 import CmProductParams from '@/components/cm-module/cm-product-params/cm-product-params.vue'
 import CmGoodsNav from '@/components/cm-module/cm-goods-nav/cm-goods-nav.vue'
 import Parser from '@/components/jyf-Parser/index' //富文本处理
+import { debounce } from '@/common/common.js'
 const observers = {}
 export default {
     components: {
@@ -109,6 +110,7 @@ export default {
     data() {
         return {
             tabs: [{ name: '商品' }, { name: '详情' }, { name: '服务项目' }],
+            showTabs: false,
             currentTab: 0,
             productId: 1014,
             imageList: [
@@ -161,11 +163,15 @@ export default {
         this.getCouponByProduct()
     },
     onReady() {
-        this.selectorTimer = setInterval(() => {
+        console.log('onReady')
+        // if (!this.isRequest) {
+        //     this.getAnchorSection()
+        // }
+        setTimeout(() => {
             if (!this.isRequest) {
                 this.getAnchorSection()
             }
-        }, 1000)
+        }, 2000)
     },
     //分享转发
     onShareAppMessage(res) {
@@ -188,6 +194,7 @@ export default {
     methods: {
         // tab切换
         tabChange(e) {
+            console.log(e)
             this.currentTab = e.index
             this.scrollToAnchor()
         },
@@ -246,7 +253,10 @@ export default {
                 .boundingClientRect(data => {
                     if (data.length > 0) {
                         this.anchorList = data
-                        clearInterval(this.selectorTimer)
+                        this.showTabs = true
+                        console.log(data)
+                        console.log('tabs is ready')
+                        // clearInterval(this.selectorTimer)
                         this.observerAnchor(data)
                     }
                 })
@@ -255,13 +265,17 @@ export default {
         // 滚动到锚点
         scrollToAnchor() {
             // const selector = '#anchor' + (this.currentTab + 1)
+            let scrollTop = 0
+            if (this.currentTab > 0) {
+                scrollTop = this.anchorList[this.currentTab - 1].height - 40
+            }
             uni.pageScrollTo({
-                scrollTop: this.anchorList[this.currentTab].top - 40
+                scrollTop: scrollTop
             })
         },
         // 为需要观测的区域创建观测者
         observerAnchor(selectorList = []) {
-            const height = uni.getSystemInfoSync().windowHeight - 50
+            const height = uni.getSystemInfoSync().windowHeight - 70
             selectorList.forEach((selector, index) => {
                 observers[selector.id] = uni.createIntersectionObserver(this)
                 observers[selector.id].relativeToViewport({ bottom: -height }).observe(`#${selector.id}`, res => {
@@ -276,10 +290,10 @@ export default {
             })
         },
         // 设置currentTab
-        setCurrentTab() {
+        setCurrentTab: debounce(function() {
             const index = this.anchorStatus.lastIndexOf(1)
             if (this.currentTab !== index) this.currentTab = index
-        }
+        }, 200)
     }
 }
 </script>

services/config.env.js

@@ -5,8 +5,8 @@ if (process.env.NODE_ENV === 'development') {
     // URL_CONFIG = 'http://192.168.2.67:8011'	 //裴裴联调地址
     // URL_CONFIG = 'http://192.168.2.68:8011'	 //涛涛联调地址
     // URL_CONFIG = 'http://127.0.0.1:8011'	 //本地联调地址
-    URL_CONFIG = 'https://mall2c-b.caimei365.com'
-    // URL_CONFIG = 'https://mall2c.caimei365.com'
+    // URL_CONFIG = 'https://mall2c-b.caimei365.com'
+    URL_CONFIG = 'https://mall2c.caimei365.com'
 } else {
     // 生产环境
     URL_CONFIG = 'https://mall2c.caimei365.com'