diff --git a/pages.json b/pages.json index 0da14b7..37ed61a 100644 --- a/pages.json +++ b/pages.json @@ -163,10 +163,10 @@ "path": "pages/order_food/order_food", "style": { "navigationStyle": "custom", - "navigationBarTextStyle": "white" + "navigationBarTextStyle": "balck" } }, - + { "path": "pages/make/list", "style": { diff --git a/pages/order_food/order_food.vue b/pages/order_food/order_food.vue index 9d2b37c..5979a7d 100644 --- a/pages/order_food/order_food.vue +++ b/pages/order_food/order_food.vue @@ -8,7 +8,7 @@ - + @@ -88,9 +88,8 @@ - - + + {{item.name}} @@ -98,9 +97,7 @@ - + @@ -146,7 +143,7 @@ - + @@ -332,8 +329,7 @@ mainArray: [], topArr: [], leftIndex: 0, - scrollInto: '', - isFixed: true, + isFixed: false, showShopInfo: false, //店铺信息弹窗是否显示 showShopsku: false, //多规格弹窗是否显示 skuId: null, // 多规格ID @@ -359,14 +355,7 @@ } else { this.opacity = true } - this.$u.debounce(() => { - if (e.scrollTop + 20 >= this.scrollTopSize) { //控制大图层 - this.isFixed = false; - } else { - this.isFixed = true; - } - }, 10) - + this.mainScroll(e) }, 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) => { - return arr.map((item, index, array) => { - if (index === 0) { - // 第一个元素前无下标,返回当前元素后下标与第一个元素的差 - return array[index + 1] - item; - } else if (index === array.length - 1) { - // 最后一个元素后无下标,返回当前元素前下标与最后一个元素的差 - return item - array[index - 1]; - } else { - // 计算当前元素前后下标的差 - return array[index + 1] - item || item - array[index - 1]; - } - }); - }; - // 计算前后下标差 - const deltas = calculateDeltas(this.topArr); - console.log(deltas); - this.leftIndex = (index < 0 ? 0 : index); + const lastElement = this.topArr[this.topArr.length - 1]; + const currentElement = this.topArr[this.leftIndex]; + const diff = lastElement - currentElement; + console.log(diff) + if (diff > this.scrollHeight) { + this.leftIndex = (index < 0 ? 0 : index); + } else { + this.leftIndex = this.leftIndex + } } }, - - - /* 左侧导航点击 */ leftTap(index) { - let HeighTdata = null - if (this.opacity) { - HeighTdata = this.HeighT //一个导航栏高度 - } else { - HeighTdata = this.HeighT * 2 //顶部的时候两个导航栏高度 - } - 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) + uni.pageScrollTo({ + scrollTop: this.topArr[index] - this.HeighT, + duration: 0 + }); + this.leftIndex = index } } } @@ -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 {