test

components/cm-module/productDetails/secondRecommend.vue

@@ -57,14 +57,12 @@
 		},
 		methods:{
 			infoRecommend(id){
-				console.log(id)
 				this.SellerService.ProductRecommend({productId:id}).then(response =>{
 					if( response.data && response.data.length > 0){
 						this.isEmpty = false
 						for (var i = 0, j = response.data.length; i < j; i += this.pageSize) {
 							this.recommendList.push(response.data.slice(i, i + this.pageSize));
 						}
-						console.log(this.recommendList)
 					}else{
 						this.isEmpty = true
 					}

second/pages/product/product-details.vue

@@ -1,20 +1,23 @@
 
 <template>
 	<view class="product" :style="{paddingBottom: userIdentity==1 ? '0rpx' :'188rpx'}">
-		<!-- <custom-p   v-if="isHeaderPoduct"
-					:systeminfo='systeminfo' 
-					:navbar-data='nvabarData' 
-					:headerBtnPosi ="headerBtnPosi" 
-					:headerColor="headerColor" 
-					:type="isShareType"
-					:page='backPage'>
-		</custom-p> -->
 		<view  class="navbar" :class="navbarFiexd">
-			<!--  -->
 			<view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 0 }" @click="tabClick(0)">
 				<text>详情</text>
 				<text class="line"></text>
 			</view>
+			<view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 1 }" @click="tabClick(1)">
+				<text>品牌</text>
+				<text class="line"></text>
+			</view>	
+			<view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 2 }" @click="tabClick(2)">
+				<text>推荐</text>
+				<text class="line"></text>
+			</view>	
+			<!-- <view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 0 }" @click="tabClick(0)">
+				<text>详情</text>
+				<text class="line"></text>
+			</view>
 			<view class="nav-item tui-skeleton-fillet" 
 				  :class="{ current: tabCurrentIndex === 1 }" 
 				  @click="tabClick(1)" 
@@ -25,7 +28,7 @@
 			<view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 2 }" @click="tabClick(2)">
 				<text>推荐</text>
 				<text class="line"></text>
-			</view>	
+			</view>	 -->
 		</view>
 		
 		<tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading	="true" :loadingType="5"></tui-skeleton>
@@ -146,6 +149,7 @@
 	import recommend from "@/components/cm-module/productDetails/secondRecommend" //相关推荐
 	import cmParameter from "@/components/cm-module/productDetails/secondParameters.vue" //相关参数
 	import wxLogin from "@/common/config/wxLogin.js"
+	import { debounce } from '@/common/config/common.js'
 	var isPreviewImg;
 	export default{
 		components:{
@@ -196,6 +200,11 @@
 				linkPath:'',
 				popupShow:false,//参数弹窗
 				CustomBar:this.CustomBar,// 顶部导航栏高度
+				tabSelectFlag:false,
+				sectionPropsArr: [],
+				scrollTopArray:[],
+				sectionTopRangeArr: [],
+				winHeight:''
 			}
 		},
 		onLoad(option) {
@@ -255,7 +264,7 @@
 				})
 			},
 			tabClick(index) {//商品详情&&供应商信息tab切换
-				console.log(index)
+				this.tabSelectFlag = true
 				this.tabCurrentIndex = index;
 				let classIndex = '.productDetails'+index;
 				uni.createSelectorQuery().select('.container-product-main').boundingClientRect((data)=>{//最外层盒子节点
@@ -319,27 +328,83 @@
 			},
 			hidePopup(){
 				this.popupShow = false
-			}
+			},
+			getSectionProps() {//获取每个tab对应区域的scrollTop值
+				let className = '.product-details',
+					sectionPropsArr = [];
+				uni.createSelectorQuery().select('.container-product-main').boundingClientRect((data)=>{//最外层盒子节点
+				　　uni.createSelectorQuery().selectAll(className).boundingClientRect((res)=>{//最外层盒子节点
+						res.forEach((item, index) => {
+							sectionPropsArr.push({
+								className: `${className}${index}`,
+								scrollTop: item.top - data.top - 150
+							})
+						})
+						this.sectionPropsArr = sectionPropsArr;
+						this.sectionTopRangeArr = this.getSectionRange(sectionPropsArr);
+				　　}).exec()
+				}).exec()
+			},
+			getSectionRange(arr) {// 获取每个tab对应区域的区间
+				let sectionScrollTopList = [];
+				for(let i = 0; i < arr.length; i++) {
+					let thisScrollTop = arr[i].scrollTop;
+					if(i < arr.length - 1) {
+						let nextScrollTop = arr[i+1].scrollTop;
+						if(i == 0) {
+							sectionScrollTopList.push(`0-${thisScrollTop}`);
+						} else if(i == arr.length - 1){
+							sectionScrollTopList.push(`${thisScrollTop}-${nextScrollTop - this.winHeight}`);
+						} else {
+							sectionScrollTopList.push(`${thisScrollTop}-${nextScrollTop}`);
+						}
+					} else {
+						sectionScrollTopList.push(`${thisScrollTop}-${thisScrollTop+500}`);
+					}
+				}
+				return sectionScrollTopList;
+			},
+			activeTab: debounce((top, _this)=> {//当滑动时也能同步激活tab
+				const { sectionTopRangeArr } = _this;
+				if(sectionTopRangeArr.length > 0) {
+					sectionTopRangeArr.forEach((item, index) => {
+						let splitItem = item.split('-'),
+							openInterval = Number(splitItem[0]),
+							closedInterval = Number(splitItem[1]);
+						if(top >= openInterval && top < closedInterval) {
+							_this.tabCurrentIndex = index;
+						}
+					})
+				}
+			},100, true),
+			getWinHeight() {
+				this.winHeight = wx.getSystemInfoSync().windowHeight;
+			},
+			
 		},
 		onPageScroll(e){//实时获取到滚动的值
-			if(e.scrollTop>50){
+			const { scrollTop } = e;
+			if(!this.tabSelectFlag) {
+				this.activeTab(scrollTop, this);
+			}
+			if(e.scrollTop>100){
 				this.headerColor = true
+				this.navbarFiexd = 'fixed'
 				this.nvabarData={							
 					showCapsule: 1, 
 					title: '商品详情', 		
 				}
 			}else{
 				this.headerColor = false
+				this.navbarFiexd = 'none'
 				this.nvabarData={
 					showCapsule: 1, 
 					title: '', 		
 				}
 			}
 			if(e.scrollTop>700){
-				this.navbarFiexd = 'fixed'
 				this.isScrollTop = true
 			}else{
-				this.navbarFiexd = 'none'
 				this.isScrollTop = false
 			}
 		},