活动

common/config/common.js

@@ -122,6 +122,42 @@ const utils = {
 			return "";
 		}
 	},
+	throttle: function(fn, gapTime) {
+	  if (gapTime == null || gapTime == undefined) {
+	    gapTime = 1500
+	  }
+	
+	  let _lastTime = null
+	
+	  // 返回新的函数
+	  return function () {
+	    let _nowTime = +new Date()
+	    if (_nowTime - _lastTime > gapTime || !_lastTime) {
+	      fn.apply(this, arguments) //将this和参数传给原函数
+	      _lastTime = _nowTime
+	    }
+	  }
+	},
+	
+	debounce: function(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;
+	    }
+	    timer = setTimeout(function() {
+	      fn.apply(context,args);
+	      timer = null;
+	    }, delay);
+	  }
+	}
+
 }
 
 module.exports = {
@@ -141,5 +177,7 @@ module.exports = {
 	checkData:utils.checkData,
 	hidePhone:utils.hidePhone,
 	interceptHtmlFn:utils.interceptHtmlFn,
-	desensitizationName:utils.desensitizationName
+	desensitizationName:utils.desensitizationName,
+	throttle: utils.throttle,
+	debounce: utils.debounce
 }

h5/pages/activity/activity_mid.vue

@@ -41,7 +41,7 @@
 										<text class="none">￥<text>???</text></text>
 									</view>
 									<view class="price-right">
-										<view class="login-btn btn-upgrade" @click.stop="this.$api.navigateTo(`/pages/login/apply?clubStatus=${clubStatus}`)">去升级</view>
+										<view class="login-btn" @click.stop="this.$api.navigateTo(`/pages/login/apply?clubStatus=${clubStatus}`)">去升级</view>
 									</view>
 								</view>
 							</template>
@@ -78,10 +78,14 @@
 
 <script>
 	import { mapState,mapMutations} from 'vuex';
+	import { debounce } from '@/common/config/common.js'
 	import authorize from '@/common/config/authorize.js'
+	
+	console.log(this)
 	export default {
 	    data() {
 	        return {
+			  winHeight: '',
 	          topBanner:'',
 			  userIdentity:'',
 			  clubStatus:'',
@@ -95,7 +99,10 @@
 			  	list: [],
 			  }, 
 			  dataList:[],
+			  tabSelectFlag: false,
+			  sectionPropsArr: [],
 			  scrollTopArray:[],
+			  sectionTopRangeArr: [],
 			  scrollTopIndex:0,
 			  hanldeProductID:0,
 			  hanldeProductName:'',
@@ -107,6 +114,7 @@
 				this.clubStatus = resolve.clubStatus
 				this.userIdentity = resolve.userIdentity
 			})
+			this.getWinHeight();
 			this.initData()
 			uni.setNavigationBarTitle({title:'年中大促'});
 		},
@@ -114,6 +122,9 @@
 			...mapState(['hasLogin','userInfo'])
 		},
 		methods:{
+			getWinHeight() {
+				this.winHeight = wx.getSystemInfoSync().windowHeight;
+			},
 			initData(){
 				this.ActivityService.GetRepeatActivityBrandList().then(response =>{
 					let data = response.data
@@ -146,11 +157,68 @@
 						item.productList = newProductList
 					})
 					this.isRequest = true
+					// 老郑你看下要不要加延时，可能会获取不到scrollTop
+					this.getSectionProps();
 				}).catch(error =>{
 					this.$util.msg(error.msg,2000)
 				})
 			},
+			getSectionProps() {
+				// 获取每个tab对应区域的scrollTop值
+				let className = '.activity-section',
+					sectionPropsArr = [];
+				uni.createSelectorQuery().select('.topBanner').boundingClientRect((data)=>{//最外层盒子节点
+				　　uni.createSelectorQuery().selectAll(className).boundingClientRect((res)=>{//最外层盒子节点
+						res.forEach((item, index) => {
+							sectionPropsArr.push({
+								className: `${className}${index}`,
+								scrollTop: item.top - data.top - 50
+							})
+						})
+						this.sectionPropsArr = sectionPropsArr;
+						this.sectionTopRangeArr = this.getSectionRange(sectionPropsArr);
+						console.log(this.sectionTopRangeArr)
+						console.log(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 - 2){
+							sectionScrollTopList.push(`${thisScrollTop}-${nextScrollTop - this.winHeight}`);
+						} else {
+							sectionScrollTopList.push(`${thisScrollTop}-${nextScrollTop}`);
+						}
+					} else {
+						sectionScrollTopList.push(`${thisScrollTop-this.winHeight}-${thisScrollTop}`);
+					}
+				}
+				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.headTab.TabCur = index;
+							_this.headTab.scrollLeft = (index - 1) * 60;
+						}
+					})
+				}
+			},100, true),
 			tabSelect(index,item) {//tab菜单被点击
+				this.tabSelectFlag = true;
 				this.headTab.TabCur = index;
 				this.headTab.scrollLeft = (index - 1) * 60;
 				let classIndex = '.activity-section-'+index;
@@ -160,6 +228,9 @@
 				　　　　　　duration:300,//过渡时间必须为0，uniapp bug，否则运行到手机会报错
 				　　　　　　scrollTop:res.top - data.top - 50,//滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
 				　　　　})
+						setTimeout(()=>{
+							this.tabSelectFlag = false;
+						},500)
 				　　}).exec()
 				}).exec()
 			},
@@ -198,13 +269,6 @@
 				    duration: 600
 				});
 			},
-			createSelectorQuery(event){
-				let self = this
-				let indexLength = this.scrollTopArray.length
-				let index = this.scrollTopArray[2]
-				let classIndex  = '.activity-section-'+index;
-				this.onCreateSelectorQuery(event,index,classIndex)
-			},
 			onCreateSelectorQuery(event,index,classIndex){
 				let self = this
 				uni.createSelectorQuery().select(classIndex).boundingClientRect((res)=>{//最外层盒子节点4
@@ -219,7 +283,6 @@
 				}).exec()
 			}
 		},
-		
 		onShareAppMessage (res){//小程序三点分享转发
 			if (res.from === 'button') {
 				// 来自页面内转发按钮
@@ -231,6 +294,11 @@
 			}
 		},
 		onPageScroll(e){//实时获取到滚动的值
+			const { scrollTop } = e;
+			if(!this.tabSelectFlag) {
+				this.activeTab(scrollTop, this);
+			}
+			
 			if(e.scrollTop > 450){
 				this.inputActive = 'fixed'
 			}else{