11

pages.json

@@ -163,10 +163,10 @@
 			"path": "pages/order_food/order_food",
 			"style": {
 				"navigationStyle": "custom",
-				"navigationBarTextStyle": "white"
+				"navigationBarTextStyle": "balck"
 			}
 		},
-	
+	 
 		{
 			"path": "pages/make/list",
 			"style": {

pages/order_food/order_food.vue

@@ -8,7 +8,7 @@
 		</view>
 		<!-- 顶部面板 -->
 		<view class="top--panel">
-			<navseat :opacity='opacity' :titleshow='true' :heightshow='opacity'></navseat>
+			<navseat :opacity='opacity' :titleshow='true'></navseat>
 			<!-- 顶部面板，可添加所需要放在页面顶部的内容代码。比如banner图 -->
 			<image class="panelimgbackground" :src="shopInfo.storeInfo.coverImg" mode="aspectFill">
 			</image>
@@ -88,9 +88,8 @@
 		<!-- 滚动区域 -->
 		<view class="scroll-panel" id="scroll-panel">
 			<view class="list-box">
-				<view class="left">
+				<view class="left" :style="{top: `${HeighT}px`}">
-					<scroll-view :scroll-y="!isFixed" :style="{ 'height':scrollHeight + 'px' }"
+					<scroll-view :scroll-into-view="leftIntoView" :scroll-with-animation="false">
-						: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"
 							@click="leftTap(index)">{{item.name}}</view>
@@ -98,9 +97,7 @@
 					</scroll-view>
 				</view>
 				<view class="main">
-					<scroll-view :scroll-y="!isFixed" :scroll-top="scrollHeight"
+					<view>
-						:style="{ 'height':scrollHeight + 'px' }" @scroll="mainScroll" :scroll-into-view="scrollInto"
-						:scroll-with-animation="false">
 						<view class="item main-item" v-for="(item,index) in shopProductList.productInfo" :key="index"
 							:id="'item-'+index">
 							<view class="title">
@@ -146,7 +143,7 @@
 							</view>
 						</view>
 						<view class="fill-last" :style="{ 'height':fillHeight + 'px' }"></view>
-					</scroll-view>
+					</view>
 				</view>
 			</view>
 		</view>
@@ -332,8 +329,7 @@
 				mainArray: [],
 				topArr: [],
 				leftIndex: 0,
-				scrollInto: '',
+				isFixed: false,
-				isFixed: true,
 				showShopInfo: false, //店铺信息弹窗是否显示
 				showShopsku: false, //多规格弹窗是否显示
 				skuId: null, // 多规格ID
@@ -359,14 +355,7 @@
 			} else {
 				this.opacity = true
 			}
-			this.$u.debounce(() => {
+			this.mainScroll(e)
-				if (e.scrollTop + 20 >= this.scrollTopSize) { //控制大图层
-					this.isFixed = false;
-				} else {
-					this.isFixed = true;
-				}
-			}, 10)
-
 		},
 		computed: {
 			/* 计算左侧滚动位置定位 */
@@ -766,8 +755,6 @@
 				this.showShopInfo = true;
 			},
 
-
-
 			/**
 			 * 获取消息
 			 * @param {Object} msg
@@ -852,73 +839,46 @@
 					let last = res[res.length - 1].height;
 					if (last - 20 < this.scrollHeight) {
 						// this.fillHeight = this.scrollHeight - last + 20; //这是吸到顶部的距离
-						// this.fillHeight = 200;
+						this.fillHeight = 200;
 					}
 				});
 			},
 			/* 主区域滚动监听 */
 			mainScroll(e) {
-				console.log(e)
 				// 节流方法
 				clearTimeout(this.mainThrottle);
 				this.mainThrottle = setTimeout(() => {
 					scrollFn();
 				}, 10);
-
 				let scrollFn = () => {
-					let top = e.detail.scrollTop;
+					let top = e.scrollTop;
 					let index = 0;
 					/* 查找当前滚动距离 */
 					for (let i = (this.topArr.length - 1); i >= 0; i--) {
 						/* 在部分安卓设备上，因手机逻辑分辨率与rpx单位计算不是整数，滚动距离与有误差，增加2px来完善该问题 */
-						if ((top + 2) >= this.topArr[i] - this.scrollTopSize) {
+						if ((top + 2) >= this.topArr[i] - this.HeighT) {
 							index = i;
 							break;
 						}
 					}
-					const calculateDeltas = (arr) => {
+					const lastElement = this.topArr[this.topArr.length - 1];
-						return arr.map((item, index, array) => {
+					const currentElement = this.topArr[this.leftIndex];
-							if (index === 0) {
+					const diff = lastElement - currentElement;
-								// 第一个元素前无下标，返回当前元素后下标与第一个元素的差
+					console.log(diff)
-								return array[index + 1] - item;
+					if (diff > this.scrollHeight) {
-							} else if (index === array.length - 1) {
+						this.leftIndex = (index < 0 ? 0 : index);
-								// 最后一个元素后无下标，返回当前元素前下标与最后一个元素的差
+					} else {
-								return item - array[index - 1];
+						this.leftIndex = this.leftIndex
-							} else {
+					}
-								// 计算当前元素前后下标的差
-								return array[index + 1] - item || item - array[index - 1];
-							}
-						});
-					};
-					// 计算前后下标差
-					const deltas = calculateDeltas(this.topArr);
-					console.log(deltas);
-					this.leftIndex = (index < 0 ? 0 : index);
 				}
 			},
-
-
-
 			/* 左侧导航点击 */
 			leftTap(index) {
-				let HeighTdata = null
+				uni.pageScrollTo({
-				if (this.opacity) {
+					scrollTop: this.topArr[index] - this.HeighT,
-					HeighTdata = this.HeighT //一个导航栏高度
+					duration: 0
-				} else {
+				});
-					HeighTdata = this.HeighT * 2 //顶部的时候两个导航栏高度
+				this.leftIndex = index
-				}
-				try {
-					uni.pageScrollTo({
-						scrollTop: this.scrollTopSize + HeighTdata, //滑动需要的距离  nav+列表距离的高度
-						duration: 0
-					});
-				} catch (e) {
-					//TODO handle the exception
-				}
-				setTimeout(() => {
-					this.scrollInto = `item-${index}`;
-					this.leftIndex = (index < 0 ? 0 : index);
-				}, 100)
 			}
 		}
 	}
@@ -1165,9 +1125,9 @@
 		}
 
 		.scroll-panel {
-			flex-grow: 1;
+			// flex-grow: 1;
 			// height: 0;
-			overflow: hidden;
+			// overflow: hidden;
 
 		}
 
@@ -1633,6 +1593,8 @@
 			line-height: normal;
 			box-sizing: border-box;
 			font-size: 32rpx;
+			position: sticky;
+			top: 0;
 
 			// padding-bottom: 200rpx;
 			.item {