滑动防抖

pages/order_food/order_food.vue

@@ -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.isFixed = false;
-			} else {
-				this.isFixed = true;
-			}
+			this.$u.debounce(() => {
+				console.log(e.scrollTop, this.scrollTopSize)
+				if (e.scrollTop >= this.scrollTopSize) { //控制大图层
+					// 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 ( this.amountcartNumber <= 0) {
+				if (a == "+") {
+					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,6 +942,7 @@
 		.top--panel {
 			padding: 0 20rpx;
 			background-color: #fff;
+
 			.panelimgbackground {
 				width: 382rpx;
 				margin: 82rpx auto 0 auto;
@@ -989,15 +999,18 @@
 
 			.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%;
@@ -1075,12 +1088,14 @@
 								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;
@@ -1124,10 +1143,11 @@
 							}
 						}
 
-						.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%;