代码合并

pages/home/goodsdetail/DetailBody.vue

@@ -8,7 +8,7 @@
 		}"
 	>
   <view :style="'height:'+navHeight+'px'"></view>
-		<product-info v-if="index == 0" @mbBodytop="getmbBodytop" @reviewtop="getreviewtop"></product-info>
+		<product-info v-if="index == 0" @mbBodyposition="mbBodyposition" @reviewposition="reviewposition"></product-info>
 		<product-desc v-if="index == 1"></product-desc>
 		<product-review v-if="index == 2"></product-review>
 	</view>
@@ -45,7 +45,7 @@ export default {
 
   mounted: function() {
     // #ifdef  MP-WEIXIN
-    this.navHeight = uni.getMenuButtonBoundingClientRect().top
+    this.navHeight = uni.getMenuButtonBoundingClientRect().height
     // #endif
   },
 
@@ -53,11 +53,11 @@ export default {
 
   methods: {
     ...mapMutations({}),
-	getmbBodytop:function(top){
-		this.$emit('mbBodytop',top);
+	mbBodyposition:function(top){
+		this.$emit('mbBodyposition',top);
 	},
-	getreviewtop:function(top){
-		this.$emit('reviewtop',top);
+	reviewposition:function(top){
+		this.$emit('reviewposition',top);
 	}
   }
 }

pages/home/goodsdetail/DetailHeader.vue

@@ -44,7 +44,7 @@ export default {
 	  navbaractive:1,
     }
   },
-  props:['mbBodytop','reviewtop'],
+  props:['navid'],
   components: {
     HeaderMore,
     TitleHeader
@@ -59,15 +59,10 @@ export default {
 	  share_info: function () {
     	return this.detailInfo?{ title: this.detailInfo.goods_name, link: this.currentUrl, imgUrl: this.detailInfo.photos[0], desc: this.detailInfo.goods_advword }:false
 	  },
-	  listenChange(){
-	  		   let mbBodytop = this.mbBodytop
-	  		   let reviewtop = this.reviewtop
-	  		   return { mbBodytop, reviewtop}
-	  	  }
   },
   mounted () {
     // #ifdef  MP-WEIXIN
-    this.navHeight = uni.getMenuButtonBoundingClientRect().top
+    this.navHeight = uni.getMenuButtonBoundingClientRect().height
     // #endif
     var pages = getCurrentPages()
       var page = pages[pages.length - 1]
@@ -101,26 +96,26 @@ export default {
       this.changeIndex(index)
     },
 	goanchor(id){
-			document.querySelector(id).scrollIntoView({
-				behavior:"smooth"
-			});
+        if(id == '#goods-swipe'){
+            this.navbaractive = 1
+        }else if(id == '#review'){
+            this.navbaractive = 2
+        }else if(id == '#mbBody'){
+            this.navbaractive = 3
+        }
+             this.$emit('setnav',id);
 		},
     goBack () {
       uni.navigateBack({delta:1})
     }
   },
    watch:{
-  	listenChange(val){
-  		val.mbBodytop = val.mbBodytop - 100
-  		val.reviewtop = val.reviewtop - 100
-  		if(val.mbBodytop > 0 && val.reviewtop >0){
-  			this.navbaractive = 1
-  		}else if(val.reviewtop < 0 && val.mbBodytop > 0){
-  			this.navbaractive = 2
-  		}else if(val.reviewtop < 0 && val.mbBodytop < 0){
-  			this.navbaractive = 3
-  		}
-  	}
+    navid: {
+            handler (newName, oldName) {
+                this.navbaractive = newName
+            },
+            immediate: true
+        }
 	}
 }
 </script>

pages/home/goodsdetail/child/InfoGoodsReview.vue

@@ -41,7 +41,12 @@ export default {
     this.getReviewList()
   },
 	mounted () {
-		addEventListener('scroll', this.handleScroll, true)  
+        setTimeout(() => {
+        const reviewinfo = uni.createSelectorQuery().in(this)
+        reviewinfo.select('#review').boundingClientRect(res =>{
+            this.$emit('reviewposition',res.top - res.height);
+        }).exec();
+        }, 500); 
 	},
   methods: {
     ...mapMutations({
@@ -60,14 +65,6 @@ export default {
     getGoodsEvaluation () {
 		uni.navigateTo({ url: '/pages/home/goodsdetail/GoodsEvaluation'+'?'+urlencode( { 'goods_id': this.currentProductId } )})
 	},
-	handleScroll() {
-		let reviewtop = 0
-		let query = uni.createSelectorQuery().in(this)
-		query.select('#review').boundingClientRect(data =>{
-			reviewtop = data.top
-		}).exec();
-		this.$emit('reviewtop',reviewtop);
-	} 
   }
 }
 </script>

pages/home/goodsdetail/child/ProductDesc.vue

@@ -1,6 +1,6 @@
 <template>
-	<view class="div ui-detail" id="mbBody" ref="mbBody">
-		<view class="title"><text class="border"></text><text class="titleinfo">宝贝详情</text><text class="border"></text></view>
+	<view class="div ui-detail"  ref="mbBody">
+		<view class="title" id="mbBody"><text class="border"></text><text class="titleinfo">宝贝详情</text><text class="border"></text></view>
 		<view class="div">
 			<desc-item
 				:mbBody="mbBody"
@@ -24,7 +24,12 @@ export default {
   },
 
   mounted () {
-   addEventListener('scroll', this.handleScroll, true)  
+    setTimeout(() => {
+    const mbBodyinfo = uni.createSelectorQuery().in(this)
+    mbBodyinfo.select('#mbBody').boundingClientRect(res =>{
+        this.$emit('mbBodyposition',res.top - res.height);
+    }).exec();
+    }, 500);  
   },
 
   components: {
@@ -38,14 +43,6 @@ export default {
   }),
 
   methods: {
-	  handleScroll() {
-		  let mbBodytop = 0
-		  let query = uni.createSelectorQuery().in(this)
-		  query.select('#mbBody').boundingClientRect(data =>{
-		  	mbBodytop = data.top
-		  }).exec();
-		this.$emit('mbBodytop',mbBodytop);
-	  },
   }
 }
 </script>

pages/home/goodsdetail/child/ProductInfo.vue

@@ -49,7 +49,7 @@
          <!-- 店铺保障-->
          <info-translate></info-translate>
 		<!-- 评论 -->
-		<info-goods-review @reviewtop='getreviewtop'></info-goods-review>
+		<info-goods-review @reviewposition='reviewposition'></info-goods-review>
 
 		<!-- 店铺信息 -->
 		<view class="div goods-detail-store" @click="goNavigate('/pages/home/storedetail/Storedetail',{id:storeInfo.store_id})">
@@ -79,7 +79,7 @@
 		<!-- 商品搭配 -->
 		<accessory-item></accessory-item>
 		<!-- 商品详情  -->
-		<product-desc @mbBodytop="getmbBodytop"></product-desc>
+		<product-desc @mbBodyposition="mbBodyposition"></product-desc>
 		<!-- 推荐商品  -->
 		<recommend-item></recommend-item>
 	</view>
@@ -143,11 +143,11 @@ export default {
     goNavigate(path,query=false){
       uni.navigateTo({url:path+(query?('?'+urlencode(query)):'')})
     },
-	getmbBodytop:function(top){
-		this.$emit('mbBodytop',top);
+	mbBodyposition:function(top){
+		this.$emit('mbBodyposition',top);
 	},
-	getreviewtop:function(top){
-		this.$emit('reviewtop',top);
+	reviewposition:function(top){
+		this.$emit('reviewposition',top);
 	}
 }
 }