diff --git a/yshop-drink-uniapp-vue3/pages/menu/menu.vue b/yshop-drink-uniapp-vue3/pages/menu/menu.vue index 437a958..f77dd7c 100644 --- a/yshop-drink-uniapp-vue3/pages/menu/menu.vue +++ b/yshop-drink-uniapp-vue3/pages/menu/menu.vue @@ -566,7 +566,10 @@ const getShopList = async(res) => { refreshCart(); } console.log('goods:',mygoods) - nextTick(() => measureMenuLayout()) + nextTick(() => { + measureMenuLayout() + calcSize() + }) } } } finally { @@ -689,20 +692,21 @@ const takein = (force = false) => { } } -const handleMenuTap = (id) => { //点击菜单项事件 - if (!sizeCalcState.value) { - calcSize() - } - +const handleMenuTap = async (id) => { //点击菜单项事件 menuClickLock.value = true if (menuClickLockTimer) clearTimeout(menuClickLockTimer) currentCateId.value = id menuScrollIntoView.value = `menu-${id}` + + // 首次点击时分类高度尚未测完,必须等测量完成再滚动 + if (!sizeCalcState.value) { + await calcSize() + } const targetTop = filteredGoods.value.find(item => item.id == id)?.top || 0 - nextTick(() => { - // 同一 scroll-top 重复赋值不会触发滚动,做微小偏移确保生效 - cateScrollTop.value = cateScrollTop.value === targetTop ? targetTop + 0.01 : targetTop - }) + await nextTick() + // 同一 scroll-top 重复赋值不会触发滚动,做微小偏移确保生效 + cateScrollTop.value = cateScrollTop.value === targetTop ? targetTop + 0.01 : targetTop + // scroll-with-animation 期间屏蔽 scroll 回写,动画结束后再放开 menuClickLockTimer = setTimeout(() => { menuClickLock.value = false @@ -724,29 +728,30 @@ const handleGoodsScroll = ({ detail }) => { //商品列表滚动事件 } } const calcSize = () => { - let h = 10 - let view = uni.createSelectorQuery().select('#ads') - if (view) { - view.fields({ - size: true - }, data => { - if (data) { - h += Math.floor(data.height) - } - }).exec() - } - filteredGoods.value.forEach(item => { - let view = uni.createSelectorQuery().select(`#cate-${item.id}`) - view.fields({ - size: true - }, data => { - console.log('h3:',h) - item.top = h - h += data.height - item.bottom = h - }).exec() + return new Promise((resolve) => { + const list = filteredGoods.value + if (!list.length) { + sizeCalcState.value = true + resolve() + return + } + const query = uni.createSelectorQuery() + list.forEach((item) => { + query.select(`#cate-${item.id}`).boundingClientRect() + }) + query.exec((rects) => { + let h = 0 + list.forEach((item, index) => { + const rect = rects?.[index] + const height = rect?.height || 0 + item.top = h + h += height + item.bottom = h + }) + sizeCalcState.value = true + resolve() + }) }) - sizeCalcState.value = true } const handleAddToCart = (cate, newGood, num) =>{ //添加到购物车 isCartShow.value = true