From 92230c9a97dc9ce9df3313d11d26999c04bb6b26 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 15 七月 2025 13:12:48 +0800
Subject: [PATCH] 项目初始化
---
src/pages_template/pages/mallMenu/index2.vue | 313 ++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 313 insertions(+), 0 deletions(-)
diff --git a/src/pages_template/pages/mallMenu/index2.vue b/src/pages_template/pages/mallMenu/index2.vue
new file mode 100644
index 0000000..be9b2a7
--- /dev/null
+++ b/src/pages_template/pages/mallMenu/index2.vue
@@ -0,0 +1,313 @@
+<script setup>
+import { ref, onMounted, nextTick } from 'vue';
+import classifyData from '@/pages_template/common/classify.data.js';
+
+const scrollTop = ref(0); // tab鏍囬鐨勬粴鍔ㄦ潯浣嶇疆
+const oldScrollTop = ref(0);
+const current = ref(0); // 棰勮褰撳墠椤圭殑鍊�
+const menuHeight = ref(0); // 宸﹁竟鑿滃崟鐨勯珮搴�
+const menuItemHeight = ref(0); // 宸﹁竟鑿滃崟item鐨勯珮搴�
+const itemId = ref(''); // 鏍忕洰鍙宠竟scroll-view鐢ㄤ簬婊氬姩鐨刬d
+const tabbar = classifyData;
+
+const arr = ref([]);
+const scrollRightTop = ref(0); // 鍙宠竟鏍忕洰scroll-view鐨勬粴鍔ㄦ潯楂樺害
+const timer = ref(null); // 瀹氭椂鍣�
+
+onMounted(() => {
+ getMenuItemTop();
+});
+
+// 鐐瑰嚮宸﹁竟鐨勬爮鐩垏鎹�
+const swichMenu = async (index) => {
+ if (arr.value.length === 0) {
+ await getMenuItemTop();
+ }
+ if (index === current.value) return;
+ scrollRightTop.value = oldScrollTop.value;
+ await nextTick(() => {
+ scrollRightTop.value = arr.value[index];
+ current.value = index;
+ leftMenuStatus(index);
+ });
+};
+
+// 鑾峰彇涓�涓洰鏍囧厓绱犵殑楂樺害
+const getElRect = (elClass, dataVal) => {
+ return new Promise((resolve, reject) => {
+ const query = uni.createSelectorQuery().in(this);
+ query.select('.' + elClass).fields({
+ size: true
+ }, (res) => {
+ // 濡傛灉鑺傜偣灏氭湭鐢熸垚锛宺es鍊间负null锛屽惊鐜皟鐢ㄦ墽琛�
+ if (!res) {
+ setTimeout(() => {
+ getElRect(elClass, dataVal);
+ }, 10);
+ return;
+ }
+ dataVal.value = res.height;
+ resolve();
+ }).exec();
+ });
+};
+
+// 瑙傛祴鍏冪礌鐩镐氦鐘舵��
+const observer = () => {
+ tabbar.map((val, index) => {
+ let observer = uni.createIntersectionObserver(this);
+ // 妫�娴嬪彸杈箂croll-view鐨刬d涓篿temxx鐨勫厓绱犱笌right-box鐨勭浉浜ょ姸鎬�
+ // 濡傛灉璺�.right-box搴曢儴鐩镐氦锛屽氨鍔ㄦ�佽缃乏杈规爮鐩殑娲诲姩鐘舵��
+ observer.relativeTo('.right-box', {
+ top: 0
+ }).observe('#item' + index, (res) => {
+ if (res.intersectionRatio > 0) {
+ let id = res.id.substring(4);
+ leftMenuStatus(id);
+ }
+ });
+ });
+};
+
+// 璁剧疆宸﹁竟鑿滃崟鐨勬粴鍔ㄧ姸鎬�
+const leftMenuStatus = async (index) => {
+ current.value = index;
+ // 濡傛灉涓�0锛屾剰鍛崇潃灏氭湭鍒濆鍖�
+ if (menuHeight.value === 0 || menuItemHeight.value === 0) {
+ await getElRect('menu-scroll-view', menuHeight);
+ await getElRect('u-tab-item', menuItemHeight);
+ }
+ // 灏嗚彍鍗曟椿鍔╥tem鍨傜洿灞呬腑
+ scrollTop.value = index * menuItemHeight.value + menuItemHeight.value / 2 - menuHeight.value / 2;
+};
+
+// 鑾峰彇鍙宠竟鑿滃崟姣忎釜item鍒伴《閮ㄧ殑璺濈
+const getMenuItemTop = () => {
+ return new Promise((resolve) => {
+ let selectorQuery = uni.createSelectorQuery();
+ selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
+ // 濡傛灉鑺傜偣灏氭湭鐢熸垚锛宺ects鍊间负[](鍥犱负鐢╯electAll锛屾墍浠ヨ繑鍥炵殑鏄暟缁�)锛屽惊鐜皟鐢ㄦ墽琛�
+ if (!rects.length) {
+ setTimeout(() => {
+ getMenuItemTop();
+ }, 10);
+ return;
+ }
+ rects.forEach((rect) => {
+ // 杩欓噷鍑忓幓rects[0].top锛屾槸鍥犱负绗竴椤归《閮ㄥ彲鑳戒笉鏄创鍒板鑸爮(姣斿鏈変釜鎼滅储妗嗙殑鎯呭喌)
+ arr.value.push(rect.top - rects[0].top);
+ resolve();
+ });
+ }).exec();
+ });
+};
+
+// 鍙宠竟鑿滃崟婊氬姩
+const rightScroll = async (e) => {
+ oldScrollTop.value = e.detail.scrollTop;
+ if (arr.value.length === 0) {
+ await getMenuItemTop();
+ }
+ if (timer.value) return;
+ if (!menuHeight.value) {
+ await getElRect('menu-scroll-view', menuHeight);
+ }
+ setTimeout(() => { // 鑺傛祦
+ timer.value = null;
+ // scrollHeight涓哄彸杈硅彍鍗曞瀭鐩翠腑鐐逛綅缃�
+ let scrollHeight = e.detail.scrollTop + menuHeight.value / 2;
+ for (let i = 0; i < arr.value.length; i++) {
+ let height1 = arr.value[i];
+ let height2 = arr.value[i + 1];
+ // 濡傛灉涓嶅瓨鍦╤eight2锛屾剰鍛崇潃鏁版嵁寰幆宸茬粡鍒颁簡鏈�鍚庝竴涓紝璁剧疆宸﹁竟鑿滃崟涓烘渶鍚庝竴椤瑰嵆鍙�
+ if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
+ leftMenuStatus(i);
+ return;
+ }
+ }
+ }, 10);
+};
+
+const clickMenu = (menu) => {
+ console.log(menu);
+};
+</script>
+
+<template>
+ <view class="u-wrap">
+ <view class="u-search-box">
+ <view class="u-search-inner">
+ <u-icon name="search" color="#909399" :size="28"></u-icon>
+ <text class="u-search-text">鎼滅储</text>
+ </view>
+ </view>
+ <view class="u-menu-wrap">
+ <scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"
+ :scroll-into-view="itemId">
+ <view v-for="(item, index) in tabbar" :key="index" class="u-tab-item"
+ :class="[current == index ? 'u-tab-item-active' : '']" @tap.stop="swichMenu(index)">
+ <text class="u-line-1">{{ item.name }}</text>
+ </view>
+ </scroll-view>
+ <scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box"
+ @scroll="rightScroll">
+ <view class="page-view">
+ <view class="class-item" :id="'item' + index" v-for="(item, index) in tabbar" :key="index">
+ <view class="item-title">
+ <text>{{ item.name }}</text>
+ </view>
+ <view class="item-container">
+ <view class="thumb-box" v-for="(item1, index1) in item.foods" :key="index1"
+ @click="clickMenu(item1)">
+ <image class="item-menu-image" :src="item1.icon" mode=""></image>
+ <view class="item-menu-name">{{ item1.name }}</view>
+ </view>
+ </view>
+ </view>
+ </view>
+ </scroll-view>
+ </view>
+ </view>
+</template>
+<style lang="scss" scoped>
+.u-wrap {
+ height: calc(100vh);
+ /* #ifdef H5 */
+ height: calc(100vh - var(--window-top));
+ /* #endif */
+ display: flex;
+ flex-direction: column;
+}
+
+.u-search-box {
+ padding: 18rpx 30rpx;
+}
+
+.u-menu-wrap {
+ flex: 1;
+ display: flex;
+ overflow: hidden;
+}
+
+.u-search-inner {
+ background-color: rgb(234, 234, 234);
+ border-radius: 100rpx;
+ display: flex;
+ align-items: center;
+ padding: 10rpx 16rpx;
+}
+
+.u-search-text {
+ font-size: 26rpx;
+ color: $u-tips-color;
+ margin-left: 10rpx;
+}
+
+.u-tab-view {
+ width: 200rpx;
+ height: 100%;
+}
+
+.u-tab-item {
+ height: 110rpx;
+ background: #f6f6f6;
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 26rpx;
+ color: #444;
+ font-weight: 400;
+ line-height: 1;
+}
+
+.u-tab-item-active {
+ position: relative;
+ color: #000;
+ font-size: 30rpx;
+ font-weight: 600;
+ background: #fff;
+}
+
+.u-tab-item-active::before {
+ content: "";
+ position: absolute;
+ border-left: 4px solid $u-primary;
+ height: 32rpx;
+ left: 0;
+ top: 39rpx;
+}
+
+.u-tab-view {
+ height: 100%;
+}
+
+.right-box {
+ background-color: rgb(250, 250, 250);
+}
+
+.page-view {
+ padding: 16rpx;
+}
+
+.class-item {
+ margin-bottom: 30rpx;
+ background-color: #fff;
+ padding: 16rpx;
+ border-radius: 8rpx;
+}
+
+.class-item:last-child {
+ min-height: 100vh;
+}
+
+.item-title {
+ font-size: 26rpx;
+ color: $u-main-color;
+ font-weight: bold;
+}
+
+.item-menu-name {
+ font-weight: normal;
+ font-size: 24rpx;
+ color: $u-main-color;
+}
+
+.item-container {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+// 瀹氫箟椤圭洰灏哄鍙橀噺
+$item-size: 100rpx;
+
+.thumb-box {
+ width: 33.333333%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ margin-top: 20rpx;
+ padding: 10rpx;
+ box-sizing: border-box;
+
+ // 浣垮浘鐗囧鍣ㄧ殑瀹介珮閮藉熀浜巌tem-size鍙橀噺
+ .item-menu-image {
+ width: $item-size;
+ height: $item-size;
+ }
+
+ .item-menu-name {
+ font-weight: normal;
+ font-size: 24rpx;
+ color: $u-main-color;
+ margin-top: 10rpx;
+ text-align: center;
+ }
+}
+
+.item-menu-image {
+ width: 120rpx;
+ height: 120rpx;
+}
+</style>
--
Gitblit v1.9.3