diff --git a/yshop-drink-uniapp-vue3/pages.json b/yshop-drink-uniapp-vue3/pages.json index 7c92c66..900ef0f 100644 --- a/yshop-drink-uniapp-vue3/pages.json +++ b/yshop-drink-uniapp-vue3/pages.json @@ -3,7 +3,9 @@ { "path": "pages/index/index", "style": { - "navigationBarTitleText": "首页" + "navigationBarTitleText": "首页", + "navigationBarBackgroundColor": "#fff3e6", + "backgroundColor": "#fff3e6" } }, diff --git a/yshop-drink-uniapp-vue3/pages/index/index.vue b/yshop-drink-uniapp-vue3/pages/index/index.vue index 6733e9c..291318b 100644 --- a/yshop-drink-uniapp-vue3/pages/index/index.vue +++ b/yshop-drink-uniapp-vue3/pages/index/index.vue @@ -1,10 +1,6 @@ diff --git a/yshop-drink-uniapp-vue3/pages/menu/menu.vue b/yshop-drink-uniapp-vue3/pages/menu/menu.vue index 432cbba..f8cee1b 100644 --- a/yshop-drink-uniapp-vue3/pages/menu/menu.vue +++ b/yshop-drink-uniapp-vue3/pages/menu/menu.vue @@ -286,6 +286,9 @@ const newValue = ref([]) const shopAd = ref('') const isCartShow = ref(true) const popup = ref() +// 点击左侧分类主动滚动时,暂时忽略右侧 scroll 回写,避免高亮回跳到上一项 +const menuClickLock = ref(false) +let menuClickLockTimer = null const measureMenuLayout = () => { } @@ -529,19 +532,32 @@ const handleMenuTap = (id) => { //点击菜单项事件 calcSize() } + menuClickLock.value = true + if (menuClickLockTimer) clearTimeout(menuClickLockTimer) currentCateId.value = id - nextTick(() => cateScrollTop.value = filteredGoods.value.find(item => item.id == id)?.top || 0) + menuScrollIntoView.value = `menu-${id}` + const targetTop = filteredGoods.value.find(item => item.id == id)?.top || 0 + nextTick(() => { + // 同一 scroll-top 重复赋值不会触发滚动,做微小偏移确保生效 + cateScrollTop.value = cateScrollTop.value === targetTop ? targetTop + 0.01 : targetTop + }) + // scroll-with-animation 期间屏蔽 scroll 回写,动画结束后再放开 + menuClickLockTimer = setTimeout(() => { + menuClickLock.value = false + menuClickLockTimer = null + }, 400) } const handleGoodsScroll = ({ detail }) => { //商品列表滚动事件 + if (menuClickLock.value) return if (!sizeCalcState.value) { calcSize() } - console.log('scrollTop:',detail) const { scrollTop } = detail - let tabs = filteredGoods.value.filter(item => item.top <= scrollTop).reverse() - if (tabs.length > 0) { + // 加一点容差,避免刚好停在分类顶部时因浮点误差高亮到上一项 + const tabs = filteredGoods.value.filter(item => item.top <= scrollTop + 2).reverse() + if (tabs.length > 0 && tabs[0].id !== currentCateId.value) { currentCateId.value = tabs[0].id } }