首页底部

pages/products/components/ActiveFilters.vue

@@ -18,7 +18,33 @@ export default {
       default: () => []
     }
   },
+  mounted() {
+    // 首次测量（可能为 0，因为 v-if 可能为 false）
+    this.$nextTick(() => this.emitHeight())
+  },
+  watch: {
+    // 筛选标签增减 → 高度变化 → 重新测量
+    'list.length'() {
+      this.$nextTick(() => this.emitHeight())
+    }
+  },
   methods: {
+    emitHeight() {
+      // v-if 为 false 时 #activeFilters 不存在，返回 0
+      if (!this.list || this.list.length === 0) {
+        this.$emit('height-change', 0)
+        return
+      }
+      const query = uni.createSelectorQuery().in(this)
+      query.select('#activeFilters').boundingClientRect()
+      query.exec((res) => {
+        if (res && res[0]) {
+          this.$emit('height-change', res[0].height)
+        } else {
+          this.$emit('height-change', 0)
+        }
+      })
+    },
     onRemove(key) {
       this.$emit('remove', key)
     },

pages/products/components/CountryBar.vue

@@ -30,7 +30,26 @@ export default {
       default: ''
     }
   },
+  mounted() {
+    // 首次测量
+    this.$nextTick(() => this.emitHeight())
+  },
+  watch: {
+    // 国家列表变化 → 换行行数可能变化 → 重新测量
+    'list.length'() {
+      this.$nextTick(() => this.emitHeight())
+    }
+  },
   methods: {
+    emitHeight() {
+      const query = uni.createSelectorQuery().in(this)
+      query.select('#countryBar').boundingClientRect()
+      query.exec((res) => {
+        if (res && res[0]) {
+          this.$emit('height-change', res[0].height)
+        }
+      })
+    },
     selectItem(item) {
       this.$emit('select', item.id)
     }

pages/products/components/ProductGrid.vue

@@ -81,7 +81,33 @@ export default {
     // 商品滚动区固定高度（px），由父组件动态计算传入
     scrollHeight: { type: Number, default: 400 }
   },
+  mounted() {
+    // 首次测量子分类高度
+    this.$nextTick(() => this.emitSubHeight())
+  },
+  watch: {
+    // 子分类列表变化 → 重新测量
+    'subCategories.length'() {
+      this.$nextTick(() => this.emitSubHeight())
+    }
+  },
   methods: {
+    emitSubHeight() {
+      // v-if 为 false 时 #subCategories 不存在，返回 0
+      if (!this.subCategories || this.subCategories.length === 0) {
+        this.$emit('sub-height-change', 0)
+        return
+      }
+      const query = uni.createSelectorQuery().in(this)
+      query.select('#subCategories').boundingClientRect()
+      query.exec((res) => {
+        if (res && res[0]) {
+          this.$emit('sub-height-change', res[0].height)
+        } else {
+          this.$emit('sub-height-change', 0)
+        }
+      })
+    },
     selectSub(id) { this.$emit('sub-select', id) },
     onTapProduct(item) { this.$emit('product-click', item) },
     onScrollToLower() { this.$emit('scroll-to-lower') }

pages/products/components/SearchBar.vue

@@ -41,7 +41,20 @@ export default {
       this.statusBarHeight = 20
     }
   },
+  mounted() {
+    // 测量自身高度并 emit 给父组件（小程序端无法跨组件查询 DOM，必须自测量）
+    this.$nextTick(() => this.emitHeight())
+  },
   methods: {
+    emitHeight() {
+      const query = uni.createSelectorQuery().in(this)
+      query.select('#searchBar').boundingClientRect()
+      query.exec((res) => {
+        if (res && res[0]) {
+          this.$emit('height-change', res[0].height)
+        }
+      })
+    },
     onInput(e) {
       this.$emit('input', e.detail.value)
     },