运营活动

h5/pages/activity/activity_mid.vue

@@ -10,7 +10,7 @@
 						<view class="basis-xxl">
 							<scroll-view scroll-x class="nav z" scroll-with-animation :scroll-left="headTab.scrollLeft">
 								<block v-for="(item,index) in headTab.list" :key="index">
-									<view class="cu-item" :class="index==headTab.TabCur?'select':''" @tap="tabSelect(index,item)" :data-id="index">
+									<view class="cu-item" :class="index== headTab.TabCur ?'select':''" @tap="tabSelect(index,item)" :data-id="index">
 										<view>{{item}}</view>
 										<view class="tab-dot bg-white"/>
 									</view>
@@ -21,8 +21,8 @@
 				</view>
 			</view>
 		</view>
-		<view class="activity-container">
-			<view class="activity-section one clearfix" v-for="(item, index) in dataList">
+		<view class="activity-container" id="activityContainer">
+			<view class="activity-section one clearfix" :class="'activity-section-'+ index" v-for="(item, index) in dataList" :key="index" :data-index='index' >
 				<view class="section-title" :class="'section-title-'+ index" >
 					<view class="name">{{item.classificationName}}</view>
 				</view>
@@ -94,7 +94,8 @@
 			  	scrollLeft: 0, 
 			  	list: [],
 			  }, 
-			  dataList:[]
+			  dataList:[],
+			  scrollTopArray:[]
 	        }
 	    },
 		onLoad() {
@@ -114,9 +115,10 @@
 					let data = response.data
 					this.headTab.list = data.brandNames
 					this.dataList = data.brandList
-					this.dataList.forEach(item =>{
+					this.dataList.forEach((item,index) =>{
 						let productList = item.productList
 						let newProductList = []
+						// 处理商品价格
 						productList.forEach(el=>{
 							let value = el.retailPrice
 							let number =  Number(value) - Number(value)%1;
@@ -143,16 +145,15 @@
 					this.$util.msg(error.msg,2000)
 				})
 			},
-			//tab菜单被点击
-			tabSelect(index,item) {
+			tabSelect(index,item) {//tab菜单被点击
 				this.headTab.TabCur = index;
 				this.headTab.scrollLeft = (index - 1) * 60;
-				let classIndex = '.section-title-'+index;
+				let classIndex = '.activity-section-'+index;
 				uni.createSelectorQuery().select('.topBanner').boundingClientRect((data)=>{//最外层盒子节点
 				　　uni.createSelectorQuery().select(classIndex).boundingClientRect((res)=>{//最外层盒子节点
 				　　　　uni.pageScrollTo({
-				　　　　　　duration:500,//过渡时间必须为0，uniapp bug，否则运行到手机会报错
-				　　　　　　scrollTop:res.top - data.top - 44,//滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
+				　　　　　　duration:200,//过渡时间必须为0，uniapp bug，否则运行到手机会报错
+				　　　　　　scrollTop:res.top - data.top - 60,//滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
 				　　　　})
 				　　}).exec()
 				}).exec()
@@ -185,9 +186,22 @@
 			onPageScrollTop(){
 				uni.pageScrollTo({
 				    scrollTop: 0,
-				    duration: 800
+				    duration: 600
 				});
 			},
+			createSelectorQuery(e,el){
+				let self = this
+				let index = el.index
+				let classIndex = '.activity-section-'+index;
+				// console.log('滚动条=======>',e.scrollTop)
+				uni.createSelectorQuery().select(classIndex).boundingClientRect((res)=>{//最外层盒子节点4
+					if( res.top < 60 ){
+						self.headTab.TabCur = index;
+						console.log('选项卡索引',self.headTab.TabCur)
+						self.headTab.scrollLeft = (index - 1) * 60;
+					}
+				}).exec()
+			},
 		},
 		onShareAppMessage (res){//小程序三点分享转发
 			if (res.from === 'button') {
@@ -200,16 +214,18 @@
 			}
 		},
 		onPageScroll(e){//实时获取到滚动的值
-			if(e.scrollTop>450){
+			if(e.scrollTop > 450){
 				this.inputActive = 'fixed'
 			}else{
 				this.inputActive = 'float'
 			}	
-			if(e.scrollTop>1000){
+			if(e.scrollTop>600){
 				this.showTop = true
 			}else{
 				this.showTop = false
 			}	
+			//锚点切换
+			// this.createSelectorQuery(e)
 		},
 		onPullDownRefresh() {//下拉刷新
 			uni.stopPullDownRefresh()
@@ -396,7 +412,7 @@
 						height: 60rpx;
 						padding:0 20rpx;
 						&.none{
-							padding: 6rpx 0;
+							padding: 6rpx 20rpx;
 							margin-top: 30rpx;
 							.price-left{
 								float: left;