重新实现分类组件逻辑

src/components/cate/cate.vue

@@ -1,20 +1,13 @@
 <template>
     <view class="component-cate" :style="{ height: wrapHeight + 'px' }">
         <view class="menu-wrap">
-            <scroll-view
+            <scroll-view scroll-y class="tab-view menu-scroll-view" :scroll-top="scrollLeftTop" :enhanced="true" :bounces="false">
-                scroll-y
-                class="tab-view menu-scroll-view"
-                :scroll-top="scrollTop"
-                :scroll-into-view="itemId"
-                :enhanced="true"
-                :bounces="false"
-            >
                 <view
                     class="tab-item"
                     v-for="(item, index) in data"
                     :key="index"
-                    :class="[current == index ? 'tab-item-active' : '']"
+                    :class="[currentLeftIndex == index ? 'tab-item-active' : '']"
-                    @tap.stop="swichMenu(index)"
+                    @tap.stop="switchMenu(index)"
                 >
                     <text class="line-1">{{ item.name }}</text>
                 </view>
@@ -32,9 +25,8 @@
                     <view
                         class="class-item"
                         v-for="(item, index) in data"
-                        :id="'item' + index"
                         :key="index"
-                        :style="{ height: index == data.length - 1 ? wrapHeight + utils.rpx2px(110) + 'px' : 'auto' }"
+                        :style="{ height: index == data.length - 1 ? wrapHeight + 'px' : 'auto' }"
                     >
                         <cate-tmpl v-if="cateType === 'cate'" :parentId="item.id" :data="item" @clickItem="clickItem"></cate-tmpl>
                         <list-tmpl v-if="cateType === 'list'" :parentId="item.id" :data="item" @clickItem="clickItem"></list-tmpl>
@@ -53,18 +45,16 @@ export default {
     data() {
         return {
             utils: this.$utils,
-            scrollTop: 0, //tab标题的滚动条位置
+            isReady: false,
-            oldScrollTop: 0, // tab标题的滚动条旧位置
+
-            current: 0, // 预设当前项的值
+            leftNodePos: [],
-            menuHeight: 0, // 左边菜单的高度
+            rightNodePos: [],
-            menuItemHeight: 50, // 左边菜单item的高度
+            queryTimer: null,
-            itemId: "", // 栏目右边scroll-view用于滚动的id
+            currentLeftIndex: 0,
-            arr: [], // 储存距离顶部高度的数组
-            scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
             wrapHeight: 0,
-            // 按ID选择
+            scrollLeftTop: 0,
-            timer: null,
+            scrollRightTop: 0,
-            activeIndex: 0,
+            menuHeight: 0,
         };
     },
     props: {
@@ -91,7 +81,6 @@ export default {
     },
     created() {},
     mounted() {
-        this.getMenuItemTop();
         const { windowHeight, statusBarHeight, headerHeight } = getApp().globalData.pageConfig;
         // 计算页面内边距------------------------------------------
         // #ifndef H5
@@ -108,163 +97,107 @@ export default {
         // H5窗口高度会计算tabbar高度，这里减去
         this.wrapHeight -= this.$utils.rpx2px(100);
         // #endif
+
+        this.menuHeight = this.$utils.rpx2px(100);
     },
     destroyed() {},
+    watch: {
+        /**
+         * 监听列表数据变化
+         */
+        data() {
+            this.init().then(() => {
+                this.isReady = true;
+                this.reAction();
+            });
+        },
+        /**
+         * 监听ID变化
+         */
+        activeId() {
+            if (this.isReady) {
+                this.reAction();
+            }
+        },
+    },
     methods: {
-        getElRect(elClass, dataVal) {
+        /**
-            new Promise((resolve, reject) => {
+         * 执行具体逻辑
-                const query = uni.createSelectorQuery().in(this);
+         */
-                query
+        reAction() {
-                    .select("." + elClass)
+            this.switchCate(this.activeId);
-                    .fields(
+        },
-                        {
+        /**
-                            size: true,
+         * 初始化列表
-                        },
+         */
-                        (res) => {
+        init() {
-                            // 如果节点尚未生成，res值为null，循环调用执行
+            clearTimeout(this.queryTimer);
-                            if (!res) {
+            return new Promise((resolve, reject) => {
-                                // this.getElRect(elClass);
+                const that = this;
-                                return;
+                this.queryTimer = setTimeout(() => {
+                    that.rightNodePos = [];
+                    let query = uni.createSelectorQuery().in(that);
+                    query
+                        .selectAll(".class-item")
+                        .boundingClientRect((result) => {
+                            if (result.length > 0) {
+                                result.forEach((item) => {
+                                    that.rightNodePos.push(item.top - result[0].top);
+                                });
+                                resolve();
                             }
-                            this[dataVal] = res.height;
+                        })
-                            resolve();
+                        .exec();
-                        }
+                }, 200);
-                    )
-                    .exec();
             });
         },
         /**
-         * 获取右边菜单每个item到顶部的距离
+         * 更新左侧菜单
-         * 储存到 arr 数组里面用于后面滚动判断
          */
-        getMenuItemTop() {
+        updateMenuStatus(index) {
-            new Promise((resolve) => {
+            this.currentLeftIndex = index;
-                let selectorQuery = uni.createSelectorQuery().in(this);
+            this.scrollLeftTop = index * this.menuHeight - this.wrapHeight / 2;
-                selectorQuery
-                    .selectAll(".class-item")
-                    .boundingClientRect((rects) => {
-                        // 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
-                        if (!rects.length) {
-                            // this.getMenuItemTop();
-                            return;
-                        }
-                        rects.forEach((rect) => {
-                            // 视情况而定，这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
-                            this.arr.push(rect.top - rects[0].top);
-                            // this.arr.push(rect.top)
-                            resolve();
-                        });
-                    })
-                    .exec();
-            });
         },
         /**
-         * 观测元素相交状态
+         * 滚动监听
-         * 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
-         * 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
          */
-        async observer() {
+        rightScroll(e) {
-            this.data.map((val, index) => {
+            let scrollTop = e.detail.scrollTop + 15;
-                let observer = uni.createIntersectionObserver(this);
+            for (let index = 0; index < this.rightNodePos.length; index++) {
-                observer
+                let current = this.rightNodePos[index];
-                    .relativeTo(".right-box", {
+                let next = this.rightNodePos[index + 1];
-                        top: 0,
+                if (!next || (scrollTop >= current && scrollTop < next)) {
-                    })
+                    this.updateMenuStatus(index);
-                    .observe("#item" + index, (res) => {
-                        if (res.intersectionRatio > 0) {
-                            let id = res.id.substring(4);
-                            this.leftMenuStatus(id);
-                        }
-                    });
-            });
-        },
-        /**
-         * 设置左边菜单的滚动状态
-         * @index 传入的 ID
-         */
-        async leftMenuStatus(index) {
-            this.current = index;
-            // 如果为0，意味着尚未初始化
-            if (this.menuHeight == 0 || this.menuItemHeight == 0) {
-                await this.getElRect("menu-scroll-view", "menuHeight");
-                await this.getElRect("component-tab-item", "menuItemHeight");
-            }
-            // 将菜单活动item垂直居中
-            this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
-        },
-        /**
-         * 点击左边的栏目切换
-         * @index 传入的 ID
-         */
-        async swichMenu(index) {
-            if (this.arr.length == 0) {
-                await this.getMenuItemTop();
-            }
-            if (index == this.current) return;
-            this.scrollRightTop = this.oldScrollTop;
-            this.$nextTick(function () {
-                this.scrollRightTop = this.arr[index];
-                this.current = index;
-                this.leftMenuStatus(index);
-            });
-        },
-        /**
-         * 右边菜单滚动
-         * 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
-         */
-        async rightScroll(e) {
-            this.oldScrollTop = e.detail.scrollTop;
-            if (this.arr.length == 0) {
-                await this.getMenuItemTop();
-            }
-            if (!this.menuHeight) {
-                await this.getElRect("menu-scroll-view", "menuHeight");
-            }
-            // scrollHeight为右边菜单垂直中点位置
-            // let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
-            // scrollHeight为右边菜单头部位置
-            let scrollHeight = e.detail.scrollTop + 15;
-            for (let i = 0; i < this.arr.length; i++) {
-                let height1 = this.arr[i];
-                let height2 = this.arr[i + 1];
-                if (!height2 || (scrollHeight >= height1 && scrollHeight < height2)) {
-                    this.leftMenuStatus(i);
                     return;
                 }
             }
         },
+        /**
+         * 选中某项
+         */
+        switchMenu(index) {
+            this.currentLeftIndex = index;
+            this.scrollRightTop = this.rightNodePos[index];
+        },
         /**
          * 按ID选中
          */
-        async switchCate(id) {
+        switchCate(id) {
-            if (this.arr.length == 0) {
+            let activeIndex = 0;
-                await this.getMenuItemTop();
-            }
             this.data.forEach((item, index) => {
                 if (item.id == id) {
-                    this.activeIndex = index;
+                    activeIndex = index;
                 }
             });
-            this.swichMenu(this.activeIndex);
+            this.switchMenu(activeIndex);
         },
+        /**
+         * 点击
+         */
         clickItem(parentId, id) {
             this.$emit("clickItem", parentId, id);
         },
     },
-    watch: {
-        activeId(activeId) {
-            this.switchCate(activeId);
-        },
-        arr(arr) {
-            clearTimeout(this.timer);
-            if (this.activeIndex > 0) {
-                const that = this;
-                this.timer = setTimeout(() => {
-                    that.scrollRightTop = arr[that.activeIndex];
-                }, 200);
-            }
-        },
-    },
 };
 </script>