滑动防抖

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
 			}
+			this.$u.debounce(() => {
+				console.log(e.scrollTop, this.scrollTopSize)
 				if (e.scrollTop >= this.scrollTopSize) { //控制大图层
-				this.isFixed = false;
+					// this.isFixed = false;
+					this.$set(this, 'isFixed', false);
 				} else {
-				this.isFixed = true;
+					this.$set(this, 'isFixed', true);
 				}
+			}, 10)
+
 		},
 		computed: {
 			/* 计算左侧滚动位置定位 */
@@ -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 {
 					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,6 +1104,7 @@
 							}
 						}
 					}
+
 					.panelfiveitemNum {
 						// position: absolute;
 						// bottom: 82rpx;
@@ -1097,6 +1113,7 @@
 						display: flex;
 						align-items: center;
 						justify-content: flex-end;
+
 						.sku-wrap {
 							width: 138rpx;
 							height: 54rpx;
@@ -1104,10 +1121,12 @@
 							border-radius: 32rpx;
 							position: relative;
 							align-items: center;
+
 							.t {
 								font-size: 28rpx;
 								color: #fff;
 							}
+
 							.dot {
 								position: absolute;
 								top: -15rpx;
@@ -1127,6 +1146,7 @@
 						.Controls {
 							display: flex;
 							align-items: center;
+
 							.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%;