滑动防抖

pages/order_food/order_food.vue

@@ -5,7 +5,7 @@
 			style="height: 100vh; width: 100%; position: fixed; z-index: 999; top: 0; left: 0; background-color: #fff; display: flex; justify-content: center; align-items: center;">
 			<image style="width: 140rpx; height: 140rpx;" src="@/static/1.gif" mode="aspectFill"></image>
 			<text style="margin-left10rpx;font-size: 40rpx;color: #7d7d76;">加载中</text>
-		</view> 
+		</view>
 		<!-- 顶部面板 -->
 		<view class="top--panel">
 			<navseat :opacity='opacity' :titleshow='true' :heightshow='opacity'></navseat>
@@ -92,11 +92,12 @@
 		<view class="scroll-panel" id="scroll-panel">
 			<view class="list-box">
 				<view class="left">
-					<scroll-view :scroll-y="!isFixed" :style="{ 'height':scrollHeight -100 + 'px' }"
+					<scroll-view :scroll-y="!isFixed" :style="{ 'height':scrollHeight + 'px' }"
 						:scroll-into-view="leftIntoView" :scroll-with-animation="false">
 						<view class="item" v-for="(item,index) in shopProductList.productInfo" :key="index"
 							:class="{ 'active':index==leftIndex }" :id="'left-'+index" :data-index="index"
 							@tap="leftTap">{{item.name}}</view>
+						<view class="items"></view>
 					</scroll-view>
 				</view>
 				<view class="main">
@@ -364,11 +365,16 @@
 			} catch (e) {
 				//TODO handle the exception
 			}
-			if (e.scrollTop >= this.scrollTopSize) { //控制大图层
+			this.$u.debounce(() => {
-				this.isFixed = false;
+				console.log(e.scrollTop, this.scrollTopSize)
-			} else {
+				if (e.scrollTop >= this.scrollTopSize) { //控制大图层
-				this.isFixed = true;
+					// this.isFixed = false;
-			}
+					this.$set(this, 'isFixed', false);
+				} else {
+					this.$set(this, 'isFixed', true);
+				}
+			}, 10)
+
 		},
 		computed: {
 			/* 计算左侧滚动位置定位 */
@@ -519,17 +525,17 @@
 			 * @param {Object} b
 			 */
 			shopAdd(item, index, index1, a, b) {
-				if ( a == "+" ){
+				if (a == "+") {
-					if ( this.amountcartNumber <= 0) {
+					if (this.amountcartNumber <= 0) {
 						this.amountcartNumber = this.amountcartNumber + item.suit;
-					}else {
+					} else {
 						this.amountcartNumber++;
 					}
 				} else {
-					
+
-					if ( this.amountcartNumber > 0 ) {
+					if (this.amountcartNumber > 0) {
 						console.log(item)
-						if ( this.amountcartNumber <= item.suit) {
+						if (this.amountcartNumber <= item.suit) {
 							this.amountcartNumber = this.amountcartNumber - item.suit
 						} else {
 							this.amountcartNumber = this.amountcartNumber - 1;
@@ -546,7 +552,7 @@
 					return;
 				}
 				let num = 0;
-				if ( item.typeEnum == "normal") {
+				if (item.typeEnum == "normal") {
 					num = item.cartNumber + this.amountcartNumber;
 				} else {
 					num = this.skuNumber + this.amountcartNumber;
@@ -859,12 +865,14 @@
 					/* 获取最后一项的高度，设置填充高度。判断和填充时做了 +-20 的操作，是为了滚动时更好的定位 */
 					let last = res[res.length - 1].height;
 					if (last - 20 < this.scrollHeight) {
-						this.fillHeight = this.scrollHeight - last + 20;
+						this.fillHeight = this.scrollHeight - last + 20;//这是吸到顶部的距离
+						// this.fillHeight = 200;
 					}
 				});
 			},
 			/* 主区域滚动监听 */
 			mainScroll(e) {
+				console.log(e)
 				// 节流方法
 				clearTimeout(this.mainThrottle);
 				this.mainThrottle = setTimeout(() => {
@@ -887,6 +895,7 @@
 			},
 			/* 左侧导航点击 */
 			leftTap(e) {
+				console.log(this.scrollTopSize + this.HeighT,11)
 				try {
 					if (this.isFixed) {
 						uni.pageScrollTo({
@@ -933,12 +942,13 @@
 		.top--panel {
 			padding: 0 20rpx;
 			background-color: #fff;
+
 			.panelimgbackground {
 				width: 382rpx;
 				margin: 82rpx auto 0 auto;
 				height: 158rpx;
 			}
-		
+
 			.panelone {
 				margin-top: 32rpx;
 				font-family: Source Han Sans CN, Source Han Sans CN;
@@ -946,7 +956,7 @@
 				font-size: 32rpx;
 				color: #333333;
 			}
-		
+
 			.paneltow {
 				margin-top: 16rpx;
 				font-family: Source Han Sans CN, Source Han Sans CN;
@@ -954,7 +964,7 @@
 				font-size: 24rpx;
 				color: #999999;
 			}
-		
+
 			.panelthere {
 				margin-top: 32rpx;
 				margin-bottom: 50rpx;
@@ -962,14 +972,14 @@
 				font-weight: 400;
 				font-size: 24rpx;
 				color: #999999;
-		
+
 				.paneltheretext {
 					font-family: Source Han Sans CN, Source Han Sans CN;
 					font-weight: 400;
 					font-size: 28rpx;
 					color: #999999;
 				}
-		
+
 				.flex-start {
 					view {
 						font-family: Source Han Sans CN, Source Han Sans CN;
@@ -979,31 +989,34 @@
 					}
 				}
 			}
-		
+
 			.panelfour {
 				font-family: Source Han Sans CN, Source Han Sans CN;
 				font-weight: bold;
 				font-size: 32rpx;
 				color: #333333;
 			}
-		
+
 			.panelfive {
 				width: 100%;
-				.panelfive_list{
+
+				.panelfive_list {
 					display: flex;
 				}
+
 				.panelfiveitem {
 					margin-top: 16rpx;
 					width: 340rpx;
 					margin-right: 30rpx;
 					position: relative;
 					flex-shrink: 0;
+
 					.panelfiveitemimage {
 						border-radius: 20rpx 20rpx 0rpx 0rpx;
 						width: 100%;
 						height: 204rpx;
 					}
-		
+
 					.panelfiveitemone {
 						margin-top: 32rpx;
 						font-family: Source Han Sans CN, Source Han Sans CN;
@@ -1011,7 +1024,7 @@
 						font-size: 28rpx;
 						color: #333333;
 					}
-		
+
 					.panelfiveitemtow {
 						margin-top: 16rpx;
 						font-family: Source Han Sans CN, Source Han Sans CN;
@@ -1019,13 +1032,13 @@
 						font-size: 24rpx;
 						color: #FF534B;
 					}
-		
+
 					.panelfiveitemthere {
 						margin-top: 12rpx;
 						// text:nth-child(1) {
 						// 	margin-left: 0;
 						// }
-		
+
 						text {
 							padding: 4rpx 24rpx;
 							background: #F6F6F6;
@@ -1036,7 +1049,7 @@
 							color: #999999;
 						}
 					}
-		
+
 					.panelfiveitemfour {
 						margin-top: 12rpx;
 						width: 100%;
@@ -1050,7 +1063,7 @@
 						font-size: 24rpx;
 						color: #999999;
 					}
-		
+
 					.panelfiveitemfive {
 						margin-top: 8rpx;
 						font-family: Source Han Sans CN, Source Han Sans CN;
@@ -1058,9 +1071,9 @@
 						font-size: 24rpx;
 						color: #999999;
 					}
-		
+
 					.panelfiveitemsex {
-		
+
 						.panelfiveitemsex_oen {
 							text:nth-child(1) {
 								font-family: Source Han Sans CN, Source Han Sans CN;
@@ -1068,19 +1081,21 @@
 								font-size: 24rpx;
 								color: #333333;
 							}
-		
+
 							text:nth-child(2) {
 								font-family: Source Han Sans CN, Source Han Sans CN;
 								font-weight: bold;
 								font-size: 36rpx;
 								color: #333333;
 							}
+
 							text:nth-child(3) {
 								font-family: Source Han Sans CN, Source Han Sans CN;
 								font-weight: 400;
 								font-size: 36rpx;
 								color: #333333;
 							}
+
 							text:nth-child(4) {
 								font-family: Source Han Sans CN, Source Han Sans CN;
 								font-weight: 400;
@@ -1089,7 +1104,8 @@
 							}
 						}
 					}
-					.panelfiveitemNum{
+
+					.panelfiveitemNum {
 						// position: absolute;
 						// bottom: 82rpx;
 						// right: 0;
@@ -1097,17 +1113,20 @@
 						display: flex;
 						align-items: center;
 						justify-content: flex-end;
-						.sku-wrap{
+
+						.sku-wrap {
 							width: 138rpx;
 							height: 54rpx;
 							background: #E3AD7F;
 							border-radius: 32rpx;
 							position: relative;
 							align-items: center;
-							.t{
+
+							.t {
 								font-size: 28rpx;
 								color: #fff;
 							}
+
 							.dot {
 								position: absolute;
 								top: -15rpx;
@@ -1123,11 +1142,12 @@
 								font-size: 20rpx;
 							}
 						}
-						
+
-						.Controls{
+						.Controls {
 							display: flex;
 							align-items: center;
-							.num{
+
+							.num {
 								margin: 8rpx 8rpx 0 8rpx;
 							}
 						}
@@ -1666,6 +1686,14 @@
 				}
 			}
 
+			.items {
+				height: 180rpx;
+				position: relative;
+				font-weight: 400;
+				font-size: 24rpx;
+				color: #333333;
+			}
+
 			.fill-last {
 				height: 0;
 				width: 100%;